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

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>
    );
  }
}

Answer 1

您当前正尝试通过编写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>
    );
  }
}