Reactjs &引用；无法读取属性'；数据'；“无效”的定义；尝试读取反应状态时

因此，我试图设置allDeals状态，并将其作为道具发送到我的组件选项卡

class IndexHeaderHome extends Component {
  componentDidMount() {
    const db = firebase.firestore();
    let citiesRef = db.collection("Live_Deals");
    let query = citiesRef
      .where("liveDiscountActive", "==", true)
      .get()
      .then((snapshot) => {
        if (snapshot.empty) {
          console.log("No matching documents.");
          return;
        }

        snapshot.forEach((doc) => {
          console.log(doc.id, "=>", doc.data());
          let allDeals = [];
          let data = doc.data();

          let discountName = data.liveDiscountName;
          let discountDesc = data.liveDiscountDescription;
          let discountDisp = data.liveDiscountDispensary;
          let discountCat = data.liveDiscountCategory;
          let discountEnd = data.liveDiscountEndDate;

          allDeals.push({
            // pushing the current email to the end of the array
            discountName,
            discountDesc,
            discountCat,
            discountDisp,
            discountEnd,
          });

          console.log("all deaaaals" + allDeals);

          this.setState({ data: allDeals }); // adding all the emails to the state at once
        });
      })
      .catch((err) => {
        console.log("Error getting documents", err);
      });
  }
  render() {
    return (
      <div className="page-header clear-filter" filter-color="blue">
        <div
          className="page-header-image"
          style={{
            backgroundImage: "url(" + require("assets/img/header.jpg") + ")",
          }}
        ></div>
        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />{" "}
        <br /> <br /> <br />
        <Container>
          <div className="content-center brand">
            <h1 className="h1-seo">Get updates on the latest deals!</h1>
            <h3>Save money everyday with our live deal updates!</h3>
          </div>
        </Container>
        <Container>
          <FilterNow />
          {this.state.data.map((value, index) => (
            <Tabs
              DealName={value.discountName}
              DealDesc={value.discountDesc}
              DealDisp={value.discountDisp}
              DealCat={value.discountCat}
              DealEnd={value.discountEnd}
            />
          ))}
        </Container>
      </div>
    );
  }
}
export default IndexHeaderHome;

这些都记录了它们应该记录的值

  discountName,
            discountDesc,
            discountCat,
            discountDisp,
            discountEnd,

---

如果有人知道我做错了什么，并能帮我解决问题，我将不胜感激=]

您必须在forEach循环之后设置一次state，并且您要将数据推入的数组需要在for循环之外进行初始化。此外，由于尚未在构造函数中初始化状态，在初始渲染后发生setState更新时会出现错误

class IndexHeaderHome extends Component {
  state = {
     data: []
  }
  componentDidMount() {
    const db = firebase.firestore();
    let citiesRef = db.collection("Live_Deals");
    let query = citiesRef
      .where("liveDiscountActive", "==", true)
      .get()
      .then((snapshot) => {
        if (snapshot.empty) {
          console.log("No matching documents.");
          return;
        }
        let allDeals = [];
        snapshot.forEach((doc) => {
          console.log(doc.id, "=>", doc.data());

          let data = doc.data();

          let discountName = data.liveDiscountName;
          let discountDesc = data.liveDiscountDescription;
          let discountDisp = data.liveDiscountDispensary;
          let discountCat = data.liveDiscountCategory;
          let discountEnd = data.liveDiscountEndDate;

          allDeals.push({
            // pushing the current email to the end of the array
            discountName,
            discountDesc,
            discountCat,
            discountDisp,
            discountEnd,
           });
        });
        console.log("all deaaaals" + allDeals);

        this.setState({ data: allDeals }); // adding all the emails to the state at once
      })
      .catch((err) => {
        console.log("Error getting documents", err);
      });
  }
  render() {
    return (
      <div className="page-header clear-filter" filter-color="blue">
        <div
          className="page-header-image"
          style={{
            backgroundImage: "url(" + require("assets/img/header.jpg") + ")",
          }}
        ></div>
        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />{" "}
        <br /> <br /> <br />
        <Container>
          <div className="content-center brand">
            <h1 className="h1-seo">Get updates on the latest deals!</h1>
            <h3>Save money everyday with our live deal updates!</h3>
          </div>
        </Container>
        <Container>
          <FilterNow />
          {this.state.data.map((value, index) => (
            <Tabs
              DealName={value.discountName}
              DealDesc={value.discountDesc}
              DealDisp={value.discountDisp}
              DealCat={value.discountCat}
              DealEnd={value.discountEnd}
            />
          ))}
        </Container>
      </div>
    );
  }
}
export default IndexHeaderHome;

类IndexHeaderHome扩展组件{
状态={
数据：[]
}
componentDidMount（）{
const db=firebase.firestore（）；
让citiesRef=db.collection（“实时交易”）；
让query=citiesRef
.where（“liveDiscountActive”，“==”，true）
.get（）
。然后（（快照）=>{
if（snapshot.empty）{
log（“没有匹配的文档”）；
返回；
}
让allDeals=[]；
snapshot.forEach（（doc）=>{
console.log（doc.id，=>，doc.data（））；
设data=doc.data（）；
让折扣名称=data.liveDiscountName；
让折扣描述=data.liveDiscountDescription；
let discountDisp=data.liveDiscountDisparency；
让折扣猫=data.liveDiscountCategory；
让DescentEnd=data.liveDescentEndDate；
所有交易。推({
//将当前电子邮件推送到阵列的末尾
折扣名称，
折扣说明，
折扣猫，
折扣，
打消，
});
});
console.log（“所有deaaals”+所有交易）；
this.setState（{data:allDeals}）；//一次将所有电子邮件添加到该状态
})
.catch（（错误）=>{
log（“获取文档时出错”，err）；
});
}
render（）{
返回(



















获取最新交易的更新！
通过我们的实时交易更新，每天都可以省钱！
{this.state.data.map（（值，索引）=>(
))}
);
}
}
导出默认索引HeaderHome；

您必须在forEach循环之后设置一次state，并且您要将数据推入的数组也需要在for循环之外初始化。此外，由于尚未在构造函数中初始化状态，在初始渲染后发生setState更新时会出现错误

class IndexHeaderHome extends Component {
  state = {
     data: []
  }
  componentDidMount() {
    const db = firebase.firestore();
    let citiesRef = db.collection("Live_Deals");
    let query = citiesRef
      .where("liveDiscountActive", "==", true)
      .get()
      .then((snapshot) => {
        if (snapshot.empty) {
          console.log("No matching documents.");
          return;
        }
        let allDeals = [];
        snapshot.forEach((doc) => {
          console.log(doc.id, "=>", doc.data());

          let data = doc.data();

          let discountName = data.liveDiscountName;
          let discountDesc = data.liveDiscountDescription;
          let discountDisp = data.liveDiscountDispensary;
          let discountCat = data.liveDiscountCategory;
          let discountEnd = data.liveDiscountEndDate;

          allDeals.push({
            // pushing the current email to the end of the array
            discountName,
            discountDesc,
            discountCat,
            discountDisp,
            discountEnd,
           });
        });
        console.log("all deaaaals" + allDeals);

        this.setState({ data: allDeals }); // adding all the emails to the state at once
      })
      .catch((err) => {
        console.log("Error getting documents", err);
      });
  }
  render() {
    return (
      <div className="page-header clear-filter" filter-color="blue">
        <div
          className="page-header-image"
          style={{
            backgroundImage: "url(" + require("assets/img/header.jpg") + ")",
          }}
        ></div>
        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />{" "}
        <br /> <br /> <br />
        <Container>
          <div className="content-center brand">
            <h1 className="h1-seo">Get updates on the latest deals!</h1>
            <h3>Save money everyday with our live deal updates!</h3>
          </div>
        </Container>
        <Container>
          <FilterNow />
          {this.state.data.map((value, index) => (
            <Tabs
              DealName={value.discountName}
              DealDesc={value.discountDesc}
              DealDisp={value.discountDisp}
              DealCat={value.discountCat}
              DealEnd={value.discountEnd}
            />
          ))}
        </Container>
      </div>
    );
  }
}
export default IndexHeaderHome;

类IndexHeaderHome扩展组件{
状态={
数据：[]
}
componentDidMount（）{
const db=firebase.firestore（）；
让citiesRef=db.collection（“实时交易”）；
让query=citiesRef
.where（“liveDiscountActive”，“==”，true）
.get（）
。然后（（快照）=>{
if（snapshot.empty）{
log（“没有匹配的文档”）；
返回；
}
让allDeals=[]；
snapshot.forEach（（doc）=>{
console.log（doc.id，=>，doc.data（））；
设data=doc.data（）；
让折扣名称=data.liveDiscountName；
让折扣描述=data.liveDiscountDescription；
let discountDisp=data.liveDiscountDisparency；
让折扣猫=data.liveDiscountCategory；
让DescentEnd=data.liveDescentEndDate；
所有交易。推({
//将当前电子邮件推送到阵列的末尾
折扣名称，
折扣说明，
折扣猫，
折扣，
打消，
});
});
console.log（“所有deaaals”+所有交易）；
this.setState（{data:allDeals}）；//一次将所有电子邮件添加到该状态
})
.catch（（错误）=>{
log（“获取文档时出错”，err）；
});
}
render（）{
返回(



















获取最新交易的更新！
通过我们的实时交易更新，每天都可以省钱！
{this.state.data.map（（值，索引）=>(
))}
);
}
}
导出默认索引HeaderHome；

我将allDeals数组放在forEach循环之外，在您的帖子中this.setState看起来与我的位置相同，是否应该放在其他地方？出于某种原因，我收到了相同的错误。不，this.setState需要在forEach循环之外它在forEach循环之外。更新了答案，出现了另一个与状态初始化相关的问题我将allDeals数组放在forEach循环之外，在你的帖子中，this.setState看起来与我的位置相同，应该在别的地方吗？出于某种原因，我收到了相同的错误。否this.setState需要在forEach循环之外它在forEach循环之外。更新了答案，出现了另一个与状态初始化相关的问题