Question

所以我的问题是我需要在一个功能/组件内设置一个状态。状态“ isLoading”默认设置为 true （用于ActivityIndicator），我需要在组件内部将其更改回 false ，以便使 Indicator 停止工作，组件呈现结果。

这是代码：

const Data = require('../data/my_data.json');

export default class Albums extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      Data_list : Data,
      isLoading: true,
    };

componentWillMount() {
    return this.state.Data_list.map(something=> (
      <list_Detail key={something.id} something={something} />
    ));
  }

render() {
    if(this.state.isLoading){
       return(
        <View style={{flex: 1, padding: 20}}>
           <ActivityIndicator/>
        </View>
       )
    }
return (
    <ScrollView>{this.componentWillMount()}</ScrollView>

    )}
}

我已经尝试过：

componentWillMount() {
    return this.state.Data_list.map(something=> (
      <list_Detail key={something.id} something={something} />
    ))
    .then(this.setState({isLoading: false}));
  }

但是没有用

有任何想法!!!! ????

Answer 1

componentWillMount是生命周期方法，在呈现组件之前即被调用。您无法通过此方法返回用户界面

将UI部件移至render方法，仅将api调用保留在componentWillMount中。

componentWillMount() {
    axios.get('https://api.jsonbin.io/b/5d05c8712132b7426d0')
    .then(response => this.setState({Data: response.data, isLoading: false}));
    )); 
}

在render方法中，

render(){
  return (
  //other UI
  {this.state.Data.map(something => (
          <list_Detail key={something.id} something={something} />
         />
  ))}
}

查找componentWillMount和其他生命周期方法here

的用法

本机的小问题|活动指示器|组件|组件内部的道具|道具| setState

1 个答案: