javascript - 我正在努力从这个函数中显示这些变量

Question

您好，我是新反应，我正在尝试显示 arrayofData 和 arrayofID 但我不知道该怎么做？

class ListCampaigns extends React.Component {
  FindDocuments() {
    db.collection("campaigns")
      .get()
      .then(function(querySnapshot) {
        var arrayofID = [];
        var arrayofData = [];

        querySnapshot.forEach(function(doc) {
          arrayofID.push(doc.id);
          const campaignName = doc.data();
          arrayofData.push(campaignName);
        });

        return arrayofData, arrayofID;
      });
  }

  render() {
    return (
      <div>
        <ul>{this.FindDocuments}</ul>
      </div>
    );
  }
}

标签： javascriptarraysreactjsfunctionfirebase-realtime-database

Answer 1

您当前正在尝试通过编写在 render 方法中呈现一个函数this.FindDocuments。您可以改为使用componentDidMount钩子并调用this.FindDocuments()并设置您在组件状态中获得的响应数据。

例子

class ListCampaigns extends React.Component {
  state = { documents: [] };

  componentDidMount() {
    this.findDocuments();
  }   

  findDocuments = () => {
    db.collection("campaigns")
      .get()
      .then(querySnapshot => {
        var data = [];

        querySnapshot.forEach(function(doc) {
          data.push({
            id: doc.id,
            name: doc.data()
          });
        });

        this.setState({ documents: data });
      });
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.documents.map(document => (
            <li key={document.id}>{document.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}