单击搜索时访问 ReactJS 中的嵌套 JSON 数据？

Question

我已经尝试了其他几种方法来执行此操作，例如

How to read a nested JSON in React?

Can't access nested JSON Objects in React

当我点击“搜索”时，我正在尝试查询 API。目前，当我单击“搜索”时，API 会查询正确的 URL，但我无法访问返回的数据。发回的数据如下所示：

{
  "option_activity": [
    {
      "id": "5f033b253c8cf100018a312f",
      "bid": "0.6",
      "ask": "1.0",
      "midpoint": "0.8",
      "updated": 1594047269
    },
    {
      "id": "5f033b253c8cf100018a312f",
      "bid": "0.6",
      "ask": "1.0",
      "midpoint": "0.8",
      "updated": 1594047269
    },

有数百个这样的项目。它在控制台中的样子：

我在做什么来查询 api：

  fetchData() {
        var val = this.state.searchedValue;
        var url = "URL/TO/API"
        fetch(url)
    .then(res => res.json())
    .then((res) => {
            const itemsList = res.option_activity;

            this.setState({
                items: itemsList
            },
            function () {
                console.log(itemsList);
            }
            );
            // console.log(this.state.items)
            
        },
        
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
        
             console.log(error);

        },
        // console.log(this.state.items)
    )
}

当网络记录来自 API 的响应时，控制台日志只为 this.state.items 记录一个空数组“[]”，该数组被初始化为一个空数组。如何将“option_activity”的内容保存到数组“items”中，通过该数组访问id、bid、ask、midpoint等？

因此，items[0] 可以访问 items[0].id、items[0].midpoint 等。

提前致谢

解决方案在正确标记答案的 cmets 中

Answer 1

您是在访问不同域的 API URL 吗？如果是这样，您很可能实际上遇到了 CORS 错误。如果您尝试以编程方式访问另一个域上的端点，浏览器将检查特定标头以确保 API 允许您这样做。如果它没有看到这些标题，它将引发错误（您应该在控制台中看到）。网络选项卡仍会显示预期的有效负载，但您无法在 Javascript 中访问它。

现在，您只是在出现错误时登录控制台。因此，如果您在网络选项卡中看到响应，但总是在错误处理程序中结束，则表明响应有问题（CORS，或者以某种方式返回的格式错误的数据可能无法解析为 JSON )。

您还应该注意，您当前的日志并不是特别有用。您只会打印出 items 的旧值。由于您显然从未设置过它（请注意，您在错误处理程序中），因此您希望该值与尝试设置 items 的值之前的值相同（可能是初始空数组）。

Answer 2

首先，如果要访问id、bid等，不需要使用map转换返回的活动列表。

                const itemsList = res.option_activity;

                this.setState({
                    items: itemsList
                });

其次，如果要在使用setState后立即读取状态，则需要使用回调，类似于以下代码sn-p。

this.setState({ boardAddModalShow: true }, function () {
    console.log(this.state.boardAddModalShow);
  });

这是因为根据React docs

setState() 不会立即改变 this.state 而是创建一个 等待状态转换。调用 this 后访问 this.state 方法可能会返回现有值。没有 保证对 setState 的调用和调用的同步操作可能 进行批处理以获得性能提升。