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

【问题标题】：Getting "Object are not valid as a React child" when mapping API response映射 API 响应时获取“对象作为 React 子项无效”
【发布时间】：2018-06-02 11:37:35
【问题描述】：

我在 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 子对象无效（找到：带键的对象 {伙伴，lastMessage，时间戳}）。如果你打算渲染一个集合对于孩子，请改用数组。

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

我做错了什么？我读到有人这么说

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

但我不知道如何实现！

【问题讨论】：

数组的每个元素都是一个对象。如果要呈现消息，请执行{item.lastMessage}
@Li357 我是 React 的新手。你能解释一下我到底需要在哪里做 chage 吗？谢谢
@Li357 如果我还想传递其他项目，例如 buddy 和 timestamp 怎么办？
然后渲染多个元素。
@Li357 我现在仍然确定在哪里做{item.lastMessage}。你的意思是有这样的东西<Chat chats={this.state.chats.lastMessage} />}？如果是这样，那是行不通的

标签： javascript arrays reactjs ecmascript-6

【解决方案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>

【讨论】：

有什么方法可以渲染所有对象，而不仅仅是对象的特定属性？

【解决方案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>
  )
})

【讨论】：