Javascript 如何在React中将对象数组设置为state？

因此，我在node/express后端执行一个SQL查询，并通过JSON将结果发送到React前端。我在console.log上查看我发送的信息，这似乎是正确的。然而，我似乎不知道如何将这个对象数组设置为我的状态。我得到这个错误：

对象作为React子对象无效（找到：具有键{Title}的对象）。如果要呈现子对象集合，请改用数组

以下是我正在使用的组件：

import React, { Component } from 'react'

export class ShoppingCart extends Component {
    state = {
       cartItems: ['Title 1']
    };


      displayCart = () => {

          console.log('call it')
          console.log('hello from displaycart');
          fetch('http://localhost:5000/fillCart')
          .then((res) => res.json())

          .then((json) => {
              this.setState(state => {
                  const cartItems = state.cartItems.concat(json.Title);
                  return {
                      cartItems
                  };
              });
          })
      }

      componentDidMount() {
          this.displayCart();
      }

    render() {

        return (
            <div className="ShoppingCart">

                <h3>This is your shopping cart</h3>
                <ul>
                    {this.state.cartItems.map(item => (
                        <li key={item}>{item}</li>
                    ))}
                </ul>

            </div>
        )
    }
}

export default ShoppingCart

澄清一下，此时我的问题不是显示信息，而是首先将其设置为状态。 任何建议都将不胜感激！这件事我已经坚持了好几天了。提前感谢

与当前状态和响应中的JSON一起使用。代码如下所示：

displayCart = () => {
  fetch('http://localhost:5000/fillCart')
  .then((res) => res.json())
  .then(json => {
    const newItemsArry = json.map(itm=> itm.Titles)
    this.setState({cartItems: [...this.state.cartItems, newItemsArry]}))
  }
}

---

您需要从json响应中提取所有标题

响应格式如下所示：

{
  Title: [{Title: ''}, {Title: ''}]
}

您的顶层

json.Title

是一个包含对象的数组。
因此

.Title

属性不存在于

json.Title

上，而是存在于数组中的每个对象上

我们可以用它来提取我们需要的东西

您的设置状态可能如下所示：

this.setState(state => {
    // All titles in an array
    const titles = json.Title.map(row => row.Title)

    // Add to existing ones
    const cartItems = state.cartItems.concat(titles);

    return {
        cartItems
    };
});

---

奥斯卡·哈恩的回答非常接近。以下是他的答案，稍作修改：

.then((json) => {
              this.setState(state => {
                  const titles = json.Title.map(row => row.Title)
                  const cartItems = state.cartItems.concat(titles);
                  return {
                      cartItems
                  };
              });
          })
      }

---

更改位于json.Title.map中。有必要通过数组进行映射；但是，json.map不是通过数组映射的，因为json不是数组。Title是数组

请你展示一下JSON响应的结构好吗？给我展示一下JSON数据。这就是我发送给React的JSON的样子：[RowDataPacket{Title:'Korosko的悲剧'}，RowDataPacket{Title:'Two in the Far North'}]请将其添加到原始问题中，而不是在评论中。真的很难理解。我只是在原始问题中添加了json数据。所以更新这个答案。它消除了我在原始问题中提到的错误。但是，在浏览器中打开my React tools时，cartItems的状态设置为：cartItems:[“标题1”，未定义]。因此，基本上json对象仍然没有设置为state。这个问题有什么解决方案吗？看起来您所调用的

json

实际上是一个数组。这很令人困惑。无论如何，我已经更新了我的答案，现在应该可以了。现在找到JSON规范，它给了我以下错误：JSON.map不是一个函数。对此有什么建议吗？在这种情况下，

json

不是您在问题中展示的内容。

console.log（“.then:+json”）是什么

output@LukeSharon？@OskarHane它是这样说的：。然后：[object object]那么

console.log（JSON.stringify（JSON））

而不是@LukeSharon？@3limin4t0r我把这一行改成了你建议的。它导致了一个错误：Uncaught TypeError:无法读取未定义的属性“then”

.then((json) => {
              this.setState(state => {
                  const titles = json.Title.map(row => row.Title)
                  const cartItems = state.cartItems.concat(titles);
                  return {
                      cartItems
                  };
              });
          })
      }