时间戳

首页 > 解决方案 > 如何在 React 中设置要声明的对象数组？

javascript - 如何在 React 中设置要声明的对象数组？

问题描述

所以我在我的 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.Title（现在包含多个标题）设置到我所在州的 cartItems State 数组中，然后通过 render() 在列表中显示每个标题。但是，我对如何实现这一点感到困惑。

此外，这是我从 Node/express 后端发送的 json 数据的样子：

[
  RowDataPacket { Title: 'The Tragedy of The Korosko' },
  RowDataPacket { Title: 'Two in the Far North' }
]

澄清一下，此时我的问题不是显示信息，而是首先将其设置为状态。任何建议肯定会受到赞赏！我已经坚持了好几天了。提前致谢！！！

标签： javascriptarraysreactjsstatejavascript-objects

解决方案

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

这是响应格式的样子：

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

您的顶层json.Title是一个包含对象的数组。
因此该.Title属性不存在于 上json.Title，而是存在于数组内的每个对象上。

我们可以使用map来提取我们需要的东西。

您的 setState 可能如下所示：

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

推荐阅读