Reactjs 由于此错误，无法显示此阵列

“警告：数组或迭代器中的每个子级都应该有一个唯一的“键”属性。”我不知道如何修复此错误

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(doc.id);
        });
        this.setState({ documents: data });
        console.log(data);
      });
  };

  render() {
    return (
      <div>
        <ol>
          {this.state.documents.map(document => (
            <li key={document.key}></li>
          ))}
        </ol>
        <Button onClick={this.findDocuments}/>
      </div>
    );
  }
}

类ListAction.Component{
状态={documents:[]}；
componentDidMount（）{
这个.findDocuments（）；
}   
findDocuments=（）=>{
db.收集（“活动”）
.get（）
.然后（querySnapshot=>{
var数据=[]；
querySnapshot.forEach（函数（doc）{
数据推送（单据id）；
});
this.setState（{documents:data}）；
控制台日志（数据）；
});
};
render（）{
返回(
{this.state.documents.map（document=>(

))}
);
}
}

您的

文档

数组只是一个字符串数组，因此

document.key

将是

未定义的

只需将字符串用作

键

。如果还希望在视图中显示id，则必须将其添加到

li

元素中

{this.state.documents.map(document => (
  <li key={document}>{document}</li>
))}

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

与您的代码一样，

状态.documents

是一个id数组{

因此，如果使用document

{document.key}{code>{strong>{code>{li key={document.key}>
{document.key}>
的键，它将不起作用，因为state.document的每个元素都不是一个对象，而是一个整数值

因此，我试图理解您的需求，并为您编写代码

在下面的代码中，您还可以将{
{docId}
}替换为{
{docId}
}


类ListAction.Component{
状态={
文件：[]
};
componentDidMount（）{
这个.findDocuments（）；
}
findDocuments=（）=>{
db.收集（“活动”）
.get（）
.然后（querySnapshot=>{
var数据=[]；
querySnapshot.forEach（函数（doc）{
数据推送（单据id）；
});
这是我的国家({
文件：数据
});
控制台日志（数据）；
});
};
render（）{
报税表（
{
this.state.documents.forEach（（docId，key）=>）
{docId}
))
}  
);
}
}
@MahmoodMapara您的
文档
状态数组只是一个ID数组。您希望显示什么？数组中的ID