Question

我不断收到此错误“警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。”我不确定如何解决此错误。

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

Answer 1

您的documents数组只是一个字符串数组，因此document.key将是undefined。

只需将字符串用作key。如果您还希望在视图中显示该ID，则还必须将其添加到li元素中。

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

Answer 2

与您的代码一样，state.documents是 ID数组 { data.push(doc.id) } 。 >

因此，如果您为<li>中的键使用文档{document.key} { <li key={document.key}></li> } ，它不会起作用，因为state.document的每个元素都不是对象，而是整数值。

因此，我试图了解您的要求并为您编写代码。

在下面的代码中，您也可以将 {{<li key = {key}> {docId} </li>} 替换为 {<li key = {docId}> {docId} </li>}

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.forEach((docId, key) => ( 
        <li key = {key}> {docId} </li>
        ))
      } </ol> 
      <Button onClick = {this.findDocuments} /> 
      </div>
    );
  }
}

注意：-上面编写的代码未运行，因此请尝试自行运行它，如有任何问题，请随时发表评论。

由于此错误而无法显示此数组

2 个答案: