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

Posted 2023-02-22

【中文标题】类型错误：在 reactjs 中使用 fetch 读取 json 时未定义项目

【英文标题】：TypeError: items is undefined while reading a json using fetch in reactjs

【发布时间】：2019-12-20 22:28:00

【问题描述】：

这是我第一次使用 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 响应的任何其他变量不一致。

【参考方案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