类型错误：在 reactjs 中使用 fetch 读取 json 时未定义项目答案

【问题标题】：TypeError: items is undefined while reading a json using fetch in reactjs类型错误：在 reactjs 中使用 fetch 读取 json 时未定义项目
【发布时间】：2023-03-23 23:40:01
【问题描述】：

这是我第一次使用 ReactJS 处理 API。我非常了解 reactjs 的基础知识，但我无法阅读回复。我收到了来自 youtube api 的 json 响应。

最初我得到了

TypeError: items.map 不是函数。

但后来我意识到我可能得到的是一个对象而不是一个数组。我通过items: json.statistics 解决了这个问题。但现在我遇到了其他错误，即

类型错误：项目未定义

我只想获取 3 个信息，即 viewCount、subscriberCount 和 videoCount。我已经写了这段代码

import React, {Component} from 'react';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
           items: [],
           isLoaded: false
        }
    }

    componentDidMount() {
        fetch('https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCOYqNBjmWF8j-PzI7ZPjt_w&key=AIzaSyAMeZQW6sUQgLdDTnMVeokfbcFcT2A9SuA')
        .then(res => res.json())
        .then(json => {
            this.setState({
                isLoaded: true,
                items: json.statistics
            })
        });
    }

    render() {
        var {isLoaded, items} = this.state;
        if(!isLoaded) {
              return (<div>Loading...</div>)
        }
        else {
            return (
                <div>
                   <ul>
                      {
                         items.map(item => (
                           <li key={item.id}>
                              Total views: {item.viewCount} 
                              Total subscribers: {item.subscriberCount}
                              Total videos: {item.videoCount}
                           </li>
                        ))}
                    </ul>
                </div>
            )
          }
      }
   }

    export default App;

【问题讨论】：

请澄清您遇到的“其他错误”是什么，以便社区可以提供帮助
好的。编辑了那部分。请帮忙。
你试过json.items.statistics吗？
items 是一个数组，使用索引访问它
@caladeve。是的。 myitems: json.items.statistics。但我仍然收到那个错误。我什至更改了我的变量的名称，使其与 json 响应的任何其他变量不一致。

标签： json reactjs api

【解决方案1】：

问题似乎出在您的setState() 上。试试这样的：

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false
    };
  }

  componentDidMount() {
    fetch(
      "https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCOYqNBjmWF8j-PzI7ZPjt_w&key=AIzaSyAMeZQW6sUQgLdDTnMVeokfbcFcT2A9SuA"
    )
      .then(res => res.json())
      .then(({ items }) => {
        this.setState({
          isLoaded: true,
          items
        });
      });
  }

  render() {
    var { isLoaded, items } = this.state;
    if (!isLoaded) return <div>Loading...</div>;
    return (
      <div>
        <ul>
          {items.map(({ id, statistics }) => (
            <li key={id}>
              Total views: {statistics.viewCount}
              Total subscribers: {statistics.subscriberCount}
              Total videos: {statistics.videoCount}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

此外，如果您有 return，则不需要 if else 语句。要么使用三元运算符，要么只删除else。

Here's the sandbox如果你想看看。如果有帮助，请告诉我。

【讨论】：

它运行良好。谢谢。所以我必须在map 中使用{statistics}。顺便说一句，它会有什么不同？
statistics 对象没有id，此代码将对唯一键发出警告。
你是对的。我已经更新了答案，以便它从项目中获取id。
@Tanzeel 在这种情况下使用{ statistics } 与使用items.statistics 相同，因为您正在映射项目数组。它在 ES6 中称为destructuring。查看this article，它解释得很好。

【解决方案2】：

您正在获取items数组中的数据，您需要将json.items设置为状态，

this.setState({
    isLoaded: true,
    items: json.items
})

然后你会得到statistics对象数据，

{
    items.map(item => (
        <li key={item.id}>
          Total views: {item.statistics.viewCount} 
          Total subscribers: {item.statistics.subscriberCount}
          Total videos: {item.statistics.videoCount}
        </li>
    ))
}

Demo

【讨论】：

哦。很抱歉我使用的是Total views: {item.viewCount} 或Total views: {statistics.viewCount} 。我没有意识到它必须是Total views: {item.statistics.viewCount}