javascript - React/JSX 错误 : Any use of a keyed object should be wrapped in React. 插件

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

对于每个重复的元素，react 需要一个唯一的键。因此，就您而言，类似于:

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