React组件存储Firestore查询结果至state时遇setState未定义错误

嘿，我来帮你解决这个问题！你遇到的TypeError: Cannot read property 'setState' of undefined核心原因是函数内的this指向错误，另外还有一个小问题会导致你无法正确存储所有查询结果，我一步步给你说明：

1. 修复this指向问题 #

在你的Firestore查询回调里，你用了传统的function()语法：

.then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
    this.setState({ propertyList: doc.data })
  });
})

这种传统函数会创建自己的上下文，所以这里的this并不是你的SearchForProperty组件实例，自然找不到setState方法。

解决办法：把这两个回调函数改成箭头函数，箭头函数不会绑定自己的this，会继承外层作用域的this（也就是组件实例的this）。

2. 正确收集所有查询结果 #

你现在在forEach里每次调用setState，会把propertyList反复覆盖成单个文档的数据，最后只会保留最后一条结果。正确的做法是先把所有文档的数据收集成一个数组，再一次性更新state。

修改后的完整onSubmit方法 #

onSubmit = event => {
  event.preventDefault();
  const { postCode } = this.state; // 只解构需要用到的变量即可
  this.props.firebase.db.collection("property").where("postcode", "==", postCode)
    .get()
    .then((querySnapshot) => { // 改成箭头函数
      const propertyArray = [];
      querySnapshot.forEach((doc) => { // 改成箭头函数
        propertyArray.push(doc.data()); // 注意是doc.data()，不是doc.data（这是方法不是属性）
      });
      this.setState({ propertyList: propertyArray }); // 一次性更新数组
    })
    .catch((error) => { // 同样改成箭头函数
      console.log("Error getting documents: ", error);
      this.setState({ error: error.message }); // 可以把错误信息存入state方便展示
    });
}

额外注意点 #

• 你原来的INITIAL_STATE里propertyList设成了{}（对象），但查询结果是数组，建议改成[]（空数组），避免类型不一致：

  const INITIAL_STATE = { 
    postCode: '', 
    propertySearched: {}, 
    propertyList: [], // 这里改成数组
    error: null, 
  };
  

• 调用doc.data()的时候要加括号，这是一个方法，不是属性，漏掉括号会把方法本身存进去而不是文档数据。

内容的提问来源于stack exchange，提问作者mav91