React/JSX Error: Any use of a keyed object should be wrapped in React.addons

Question

整个错误：

"Warning: Each child in an array or iterator should have a unique \"key\" prop. Check the render method of RenderArray"

代码：

/* 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

希望这会有所帮助

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

另外，检查这个 link https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 2

对于每个重复的元素，React 都需要一个唯一的键。所以在你的情况下，是这样的：

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

Answer 3

这不是错误，而是警告，它会准确地告诉您该怎么做。在数组的 child 上添加一个 key 道具。

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

有机会时阅读 reconciliation 。

React/JSX Error: Any use of a keyed object should be wrapped in React.addons

React/JSX Error: Any use of a keyed object should be wrapped in React.addons

javascript

jsx

reactjs