Question

整个错误：

“警告：数组或迭代器中的每个子节点都应该有一个唯一的”key“支柱。检查RenderArray的render方法”

代码：

/* jshint esnext: true */

class RenderArray extends React.Component {

  constructor() {
    super();
    this.state = {myArray : ""};
  }

  componentDidMount() {
    console.log(this.state.myArray);
  }

  componentWillMount () {
    this.setState({
      myArray: ['one', 'two', 'three', 'four', 'five']
    });
  }


  render () {

    showEl = this.state.myArray.map(function(i) {
      return <li>{i}</li>;
    })


    return (
       <div className="jumbotron container">
          <ul>
            {showEl}
          </ul>
       </div>
    );
  }
};

建议？

Answer 1

对于每个重复的元素，react需要一个唯一的键。所以在你的情况下，像：

showEl = this.state.myArray.map(function(i) {
  return <li key={i}>{i}</li>;
})

Answer 2

希望，这会有所帮助

 showEl = this.state.myArray.map(function(i) {
  return <li key={i}>{i}</li>;
})

另外，请检查此链接https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 3

这不是一个错误，它是一个警告，它正在告诉你究竟该做什么。在阵列的子节点上添加key道具。

showEl = this.state.myArray.map(function(i) {
  return <li key={i}>{i}</li>;
})

如果有机会，请阅读reconciliation 。

React / JSX错误：任何对键控对象的使用都应该包含在React.addons中

3 个答案: