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

您好，我是新react，我正在尝试显示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>
    );
  }
}

类ListAction.Component{
FindDocuments（）{
db.收集（“活动”）
.get（）
.then（函数（querySnapshot）{
var arrayofID=[]；
var arrayofData=[]；
querySnapshot.forEach（函数（doc）{
arrayofID.push（文档id）；
const-campaigname=doc.data（）；
arrayofData.push（活动名称）；
});
返回arrayofData，arrayofID；
});
}
render（）{
返回(
{this.FindDocuments}
);
}
}

您当前正试图通过编写

此.FindDocuments

在render方法中呈现函数。您可以改为使用

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

类ListAction.Component{
状态={documents:[]}；
componentDidMount（）{
这个.findDocuments（）；
}   
findDocuments=（）=>{
db.收集（“活动”）
.get（）
.然后（querySnapshot=>{
var数据=[]；
querySnapshot.forEach（函数（doc）{
数据推送({
id:doc.id，
名称：doc.data（）
});
});
this.setState（{documents:data}）；
});
};
render（）{
返回(

{this.state.documents.map（document=>(
{document.name}
))}

);
}
}

您需要对React中的状态如何工作有深入的了解，尤其是对api的异步调用。这个问题应该有你想要的：