当第二次访问屏幕时，React Native null不是对象（评估'_this2.state.data'）错误

Posted 2021-05-06

我正在使用以下代码成功呈现Firebase数据库查询。

class WeightHistoryScreen extends Component {
componentWillMount = () => {
    this.setState({ data: [] });
    this.getData();
  }

  getData(){
    const { currentUser } = firebase.auth();
    firebase
      .database()
      .ref(`/users/${currentUser.uid}/data/`)
      .orderByKey()
      .on('child_added', snap =>  {
        var data = this.state.data;
        data.push({ key: snap.key, weight: snap.val().Weight });
        this.setState({ data: data });
      }) 
  }

renderRow = ({item}) => {
  return (
    <View style={[styles.card, styles.cardBorder]}>
      <Text>
        {item.key}
      </Text>
      <Text style={[styles.textRight]}>
        {item.weight} LBS
      </Text>
    </View>
  )
}

  render() {
    return (
      <View style={[styles.container]}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderRow} 
        />
      </View>
    );
  }
}

但是，在同一会话中第二次访问屏幕时出现错误。请参见下面的截图。

答案

您正在错误的地方初始化您的州，尝试这样做

class WeightHistoryScreen extends Component {
state={data:[]}
componentWillMount = () => {
    this.getData();
  }

另一答案

你的代码有一些问题应该修复我已经添加了代码注释并更新了代码。

• 在安装发生之前立即调用componentWillMount（）。它在render（）之前调用，因此在此方法中设置状态不会触发重新呈现。避免在此方法中引入任何副作用或订阅。
• 您可以在setState中访问状态值，因此无需在上面访问它// var data = this.state.data;不需要这个
• 不要直接修改数据数组，它可能会引入副作用。请改用扩展运算符

在构造函数中初始化数据数组

    constructor(){
             this.state={
                data:[]
            }
          }

            //Remove setState from here


     componentWillMount = () => {
            this.setState({ data: [] });
            this.getData();
          }
        getData(){
                const { currentUser } = firebase.auth();
                firebase
                  .database()
                  .ref(`/users/${currentUser.uid}/data/`)
                  .orderByKey()
                  .on('child_added', snap =>  {
this.setState(prevState=>({data: [...prevState.data,{ key: snap.key, weight: snap.val().Weight }]}));
                    }) }