Question

我正在学习Reactjs并尝试复制此facebook git中的示例，让孩子们警告消失，但我还是得到了警告：

var MyComponent = React.createClass({

  getInitialState: function () {
    return {idx: 0};
  },

  render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.book}</li>;
        })}
      </ol>
    );
  }

});

var result = [
  {title: "book", content: "booky"},
  {title: "pen", content: "penny"},
];

document.addEventListener("DOMContentLoaded", function () {
  ReactDOM.render(<MyComponent results={results} />, document.getElementById('widgets'));
});

Answer 1

这里有一些需要纠正的事情：

您声明并分配结果数组的变量名为result，但您将名为results的变量作为结果道具传递给MyComponent。将此变量重命名为results。

您尝试在地图函数内的result对象上尝试访问的两个对象属性是id和book，它们都没有在对象本身上定义（ title和content是。在这种情况下，将{result.book}更改为{result.title}。

最后，为了向地图返回的每个元素提供唯一ID，请设置地图的第二个参数（例如results.map(function(result, i) {...并使用数组索引作为唯一键。

总结：

results.map(function(result, i) {
  return <li key={i}>{result.title}</li>;
})

从chrome dev工具获取警告，每个孩子都应该有一个独特的关键支柱

1 个答案: