javascript - 任何对键控对象的使用都应该包装在 React.addons.createFragment(object) 中

Question

let playerInfo = [{
    name: 'jose',
    country: 'USA',
    age: 47 
}];

export default class PlayersInfo extends React.Component {
    static getProps() {
        return {};
    }
    render() {
        let playerInf = playerInfo.map((playerData, index) => {
            return <div className="item" key={index}>{playerData}</div>
        });

        return <div>

                 <div>
                    {playerInf}
                 </div>

            <RouteHandler />
        </div>;
    }

为什么我会在浏览器的控制台中收到此错误？

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

Answer 1

我整理了一个 JSBin为你。基本上，警告来自这一行:

return <div className="item" key={index}>{playerData}</div>

因为 playerData 是一个对象，ReactJS 不知道如何渲染它。

如果您将其更改为以下内容，它不会给您警告:

return (
  <div className="item" key={index}>
    <div>Name: {playerData.name}</div>
    <div>Country: {playerData.country}</div>
    <div>Age: {playerData.age}</div>
  </div>
);