映射API响应时获取“对象无效作为React子级”

Question

我在App.js中有这个：

constructor(props) {
  super(props)
  this.state = { data: 'false' };
  this._getData = this._getData.bind(this);
}

componentDidMount() {
  this._getData();
}

_getData = () => {
  const url = 'http://localhost:8888/chats';

  fetch(url, { credentials: 'include' })
    .then((resp) => resp.json())
    .then(json => this.setState({ chats: json.chats }))
}

render() {
  return (
    <div className="App">
      {
         // console.log(this.props);
         this.state.chats &&
         this.state.chats.map((item, key) =>
           <div key={key}>
             {item}
           </div>
         )
      }
      <Chat chats={this.state.chats} />
    </div>
  )
}

这是http://localhost:8888/chats的回应：

{"chats":[{"buddy":"x","lastMessage":"Hey how are you?","timestamp":"2017-12-01T14:00:00.000Z"},{"buddy":"y","lastMessage":"I agree","timestamp":"2017-12-03T01:10:00.000Z"}]}

我得到了这个：

对象作为React子对象无效（找到：具有键{buddy，lastMessage，timestamp}的对象）。如果您要渲染子集合，请使用数组。

in div (at App.js:40) // <div key={key}>
in div (at App.js:35) // <div className="App">
in App (at index.js:6) // ReactDOM.render(<App />,document.getElementById('root'));

它就是这条线的焦点

.then(json => this.setState({ chats: json.chats }))

我究竟做错了什么 ？我读了一些人这么说

不要将对象作为prop传递给React.child。相反，将其作为{... item}传递，然后使用props。{property}来访问，这可能会解决您的问题

但我不确定如何实施！

Answer 1

问题是你在映射时：

this.state.chats.map((item, key) =>
  <div key={key}>
    {item}
  </div>
)

如果你查看来自服务器的响应，item这里实际上是一个这样的对象：

{
  "buddy": "x",
  "lastMessage": "Hey how are you?",
  "timestamp": "2017-12-01T14:00:00.000Z"
}

在React中，在这种情况下，您无法将对象渲染为元素的直接子元素div。您必须呈现对象的特定属性：

<div>
  {item.lastMessage}
</div>

如果你有多件事：

<div>
  <div>{item.lastMessage}</div>
  <div>{item.buddy}</div>
  …
</div>

Answer 2

你的json.chats是一系列物体。您正在尝试迭代每个并渲染它们。正如错误所述，您无法做到这一点。您必须更多地处理对象才能呈现元素。

json.chats = [{"buddy":"x","lastMessage":"Hey how are you?","timestamp":"2017-12-01T14:00:00.000Z"},{"buddy":"y","lastMessage":"I agree","timestamp":"2017-12-03T01:10:00.000Z"}]

我想你只使用buddy和lastMessage。以下内容将呈现您正在寻找的内容。请注意，我正在从对象中提取值，并且只渲染值，即字符串。

const chats = json.chats.map(json => {
  return (
    <div>
      {json.buddy}: {json.lastMessage}
    </div>
  )
})