React Native：当我尝试解析我的数据时出现错误

Question

您好，我正在尝试在数组中解析此对象：

 [ { address: '15 rue de Bouvines',
     category: 'Bar',
     city: 'Tours',
     storeName: 'La Tabtiere',
     _key: '-KuVBzIx8rFZxneg5JvY' },
   { address: '',
     category: '',
     city: '',
     storeName: '',
     _key: '-KuVTSgauvHcvhDigNVz' } ]

这是我初始化东西和尝试解析数组的代码：

 constructor(props){
 super(props);
 this.tasksRef = firebase.database().ref('/store');
 this.state = {
  user:null,
  loading: true,
  newTask: ""
 }
}

componentDidMount() {
  // start listening for firebase updates
  this.listenForTasks(this.tasksRef);
}

//listener to get data from firebase and update listview accordingly
listenForTasks(tasksRef) {
  tasksRef.on('value', (dataSnapshot) => {
    var tasks = [];
    dataSnapshot.forEach((child) => {
      tasks.push({
        address: child.val().address,
        category: child.val().category,
        city: child.val().city,
        storeName: child.val().storeName,
        _key: child.key
      });
    });

    this.setState({
      tasks:tasks
    });
  });
 }

  this.setState({tasks:tasks}, function(this.state.tasks) {
    ParseArray() {
     return this.state.tasks.map(function(result, i){
      return(
       <View key={i}>
         <Text>{result.address}</Text>
          <View>
            <Text>{result.storeName}</Text>
          </View>
        </View>
      );
    });
  }
   } 
  );  

并尝试使用这种方式显示：

 render() {
  return(
    <View>
      test
      {this.ParseArray()}
    </View>
  )
}

但是我在 xcode 中遇到了这个错误：

undefined 不是对象（评估 'this.state.tasks.map'）

有什么想法吗？

谢谢

Answer 1

也许您的代码在其他地方出现问题，但让我声明一下，setState() 是异步的。

setState() 并不总是立即更新组件。它可能 批处理或推迟更新。这使得阅读 this.state 就在调用 setState() 之后，这是一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调（setState(updater, 回调）），其中任何一个都保证在更新后触发 已应用。如果需要根据前面的设置状态 状态，请阅读下面的更新程序参数。

https://reactjs.org/docs/react-component.html#setstate

所以，更新代码为，

this.setState({tasks:tasks}, function(this.state.tasks) {
 /** same as ParseValue() **/} 
);

将使您避免未来（或可能是当前）的错误。

当您尝试检查 this.state.tasks 部分时，您会看到， this 已定义并具有值。还有this.state。但是在渲染/安装阶段，您不能保证始终定义 this.state.tasks。

当然，你不能在任何数据结构上调用map，除了Array。

更新

this.setState({tasks:tasks}, function(this.state.tasks) {
  return this.state.tasks.map(function(result, i){
    return(
     <View key={i}>
       <Text>{result.address}</Text>
       <View>
         <Text>{result.storeName}</Text>
       </View>
     </View>
  );
 }); 
} 
) 

我没有遵循开/关括号/括号，如有必要，请修复它们。

或者，外包一个类似的函数，

ParseArray(array_of_obj) {
 return array_of_obj.map(function(result, i){
  return(
   <View key={i}>
     <Text>{result.address}</Text>
      <View>
        <Text>{result.storeName}</Text>
      </View>
    </View>
  );
});
}

并像使用它一样，

this.setState({tasks: tasks}, function(this.state.tasks) {
  return this.ParseArray(this.state.tasks)
});