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

标签 javascript reactjs jsx

整个错误:

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

建议?

最佳答案

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

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

关于javascript - React/JSX 错误 : Any use of a keyed object should be wrapped in React. 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37601466/

相关文章:

javascript - 如何为 Android 创建 phonegap 亮度插件

javascript - 如何更改浏览器中所选文本的背景颜色?

reactjs - React+redux-form - 提交后重定向

javascript - REACT JSX - 链式条件

javascript - React-native:InputText 事件触发 TouchableHighlight onPress() 事件

javascript - 如何获取当前浏览器选项卡的句柄

javascript - 如何知道 Angular 过滤数组的长度

javascript - React - 更新reducer中的数组填充对象

javascript - react / react 上下文 API : Wait for context values when using useEffect() hook

css - 悬停状态下的选项卡可访问性