Javascript 获得；对象作为React子对象无效；映射API响应时

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

{"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"}]}

A我明白了：

对象作为React子对象无效（找到：具有键的对象 {buddy，lastMessage，timestamp}）。如果您打算呈现一个集合 对于子级，请改用数组

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

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

---

但我不知道如何实施

您的

json.chats

是一个对象数组。您正在尝试对每个对象进行迭代并渲染它们。正如错误所述，您不能这样做。为了渲染元素，必须对对象进行更多处理

json.chats=[{“好友”：“x”，“lastMessage”：“你好吗？”，“时间戳”：“2017-12-01T14:00:00.000Z”}，{“好友”：“y”，“lastMessage”：“我同意”，“时间戳”：“2017-12-03T01:10:00.000Z”}]

我想您只使用了

好友

和

最后消息

。下面将呈现您正在寻找的内容。注意，我正在从对象中提取值，并且只呈现值（即字符串）

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

const chats=json.chats.map（json=>{
返回(
{json.buddy}:{json.lastMessage}
)
})

您的

json.chats

是一个对象数组。您正在尝试对每个对象进行迭代并渲染它们。正如错误所述，您不能这样做。为了渲染元素，必须对对象进行更多处理

json.chats=[{“好友”：“x”，“lastMessage”：“你好吗？”，“时间戳”：“2017-12-01T14:00:00.000Z”}，{“好友”：“y”，“lastMessage”：“我同意”，“时间戳”：“2017-12-03T01:10:00.000Z”}]

我想您只使用了

好友

和

最后消息

。下面将呈现您正在寻找的内容。请注意，我正在从对象中提取值，并且只呈现值，这些值是字符串

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

const chats=json.chats.map（json=>{
返回(
{json.buddy}:{json.lastMessage}
)
})

问题在于映射时：

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

在React中，在本例中，您不能将对象渲染为元素的直接子元素

div

。必须渲染对象的特定属性：

{item.lastMessage}

如果你有很多东西：

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

{item.lastMessage}
{item.buddy}
…

问题在于映射时：

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

在React中，在本例中，您不能将对象渲染为元素的直接子元素

div

。必须渲染对象的特定属性：

{item.lastMessage}

如果你有很多东西：

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

{item.lastMessage}
{item.buddy}
…

数组的每个元素都是一个对象。如果要呈现消息，请使用React执行

{item.lastMessage}

@Li357我是一个新成员。你能解释一下我到底需要在哪里做检查吗？Thanks@Li357如果我还想传递其他项目，如

好友

和

时间戳

，那么该怎么办？然后呈现多个元素。@Li357我现在仍然确定在哪里执行

{item.lastMessage}

。你的意思是有这样的东西吗？如果是这样，那么这就不起作用了数组的每个元素都是一个对象。如果要呈现消息，请使用React执行

{item.lastMessage}

@Li357我是一个新成员。你能解释一下我到底需要在哪里做检查吗？Thanks@Li357如果我还想传递其他项目，如

好友

和

时间戳

，那么该怎么办？然后呈现多个元素。@Li357我现在仍然确定在哪里执行

{item.lastMessage}

。你的意思是有这样的东西吗？如果是这样的话，那么这就不起作用了。有没有办法渲染所有对象而不仅仅是对象的特定属性？有没有办法渲染所有对象而不仅仅是对象的特定属性？

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