reactjs - props 数据在使用 react-native 的 componentDidMount 中不起作用

Question

在过去的 24 小时里，我一直在为这个问题苦苦挣扎。问题是，我在父类中传递 Prop 并在子组件中调用 Prop 数据。当我 checkin render 方法时，数据显示正确，但在 componentDidMount 中调用它时，它显示为 null。

这是我的代码示例

class parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isOpen: false,
      day:'monday',
      data:[],
      data1:[]
    }
  }

  back () {
    this.props.navigator.pop();
  }

  Mon(){
    var record=[];
    this.state.data.map((data) => {
      if(data.frequency[0].day == 'Monday'){
        record.push(data);
      }
    });
    this.setState({data1:record});
  }

  componentWillMount() {
    this.fetchData();
  }

  fetchData() {
  //here i am getting the data from service and set the data to the state
  }

  render(){
    return(
      <View style={styles.Maincontainer}>
        <View style={styles.navbar}>
          <View style={styles.navbarContainer}>
            <View style={styles.navbarIcon}>
              <TouchableOpacity style={styles.button} onPress={() => this.back()}>
                <Image
                  style={styles.menu2}
                  source={require('image!nav_arrow')} />
                <Text style={styles.navbuttonText}>Back</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.navbarText}>
              <Text style={styles.title}>Title</Text>
            </View>
            <View style={styles.navbarButton}>
            </View>
          </View>
        </View>
        <View style={styles.subMainContainer}>
          <View style={styles.weekHeader}>
            <View style={styles.weekRow}>
              <Text style={styles.text} onPress={this.Mon.bind(this)}>Mon</Text>
            </View>
          </View>
          <View style={styles.listBody}>
            {this.state.data1.length == 0 ?(
              <List data={this.state.data} />
            ) : (
              <List data={this.state.data1}/>
            )}
          </View>
        </View>
      </View>
    );
  }
}

在我的子组件中，我想在取自父组件的 ListView 中显示数据

class List extends React.Component{
   constructor(props){
    super(props);
    this.state = {
       dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
       }),
       isLoading: true
    };
  }
 componentDidMount(){ //**here props data shows empty**
    alert("didMount:"+JSON.stringify(this.props.data));
    var data=this.props.data
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(data),
      isLoading: false
    });
  }
  render() { //**In this alert it shows correct data**
    alert("data:"+JSON.stringify(this.props.data));
   if (this.state.isLoading) {
      return this.renderLoadingView();
    }
    return(
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderSchedule.bind(this)}
        automaticallyAdjustContentInsets={false}/>
      );
  }
  renderLoadingView(){
    return(
       <View style={styles.loading}>
       <ActivityIndicatorIOS
                size='large'/>
        <Text>
          Loading Schedule...
        </Text>
      </View>
      );
  }
  renderSchedule(data){
    return(
      <View style={styles.ListContainer}>
          <View style={styles.subContainer}>
            <Text style={styles.classText}>Class Name: {data.name}</Text>
             {data.frequency[0].day == null ? (
              <Text style={styles.Day}>Day: {data.frequency[0].date}</Text>
              ):
            <Text style={styles.Day}>Day: {data.frequency[0].day}</Text>
          }
          </View>
          <View style={styles.subContainer1}>
            <Text style={styles.startTime}>Start: {data.frequency[0].from}</Text>
            <Text style={styles.endTime}>End: {data.frequency[0].to}</Text>
          </View>
      </View>
      )
  }
}

这里我想要的是最初我需要显示总数据，当点击文本父类时需要更改数据。我想在 ListView 中显示数据。我已经在上面解释了我的问题，所以任何人都可以给我建议如何解决我的问题，非常感谢任何帮助

Answer 1

我的猜测是 componentDidMount() 中的警报是空的，因为它只调用了一次，当时数据仍然是空的，而 render() 是调用状态或 Prop 的每次更改。

我希望警报流看起来像这样:

• 从 child 的渲染调用的警报:“数据:(空)”
• 从 child 的 didMount 调用的警报:“didMount:(empty)”
• 用户点击父级的东西，状态改变，触发重新渲染
• 从 child 的渲染中调用的警报:“数据:FOO-content”

React 不会在第二次传递时调用 componentDidMount()。如果您希望在 child 的每次更新时填充数据源，您需要向 child 添加 componentDidUpdate() 方法，并复制 componentDidMount() 中的代码。

一般说明:我建议您阅读 React's explanation of component lifecycle and methods .我有一种感觉，你在 componentDidMount() 中所做的准备工作最好放在其他地方:

• 创建一个 DataSource 并使用来自 props 的数据进行初始填充:在 getInitialState()
中
• 使用来自新 Prop 的数据更新数据源:在 componentWillReceiveProps()
中