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

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

警告：任何对键控对象的使用都应该在作为子进行传递之前包装在React.addons.createFragment（object）中。

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

Answer 2

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

因为您将对象（playerData）作为子项传递给React组件。

Answer 3

在错误地渲染Date对象时，我倾向于遇到这种情况。您需要手动对其进行字符串化：

产生警告：

<div>{ new Date() }</div>

工作正常：

<div>{ String(new Date()) }</div>

Answer 4

这有用吗？

return <div>
           <div>
              {playerInf}
           </div>

           <div>      
             <RouteHandler />
           </div>;
       </div>
}

任何键控对象的使用都应包装在React.addons.createFragment（object）中

4 个答案: