javascript - JSON api 数据未在 React 中加载

Question

所以我对使用 React 还很陌生，我被分配了从 JSON API 获取数据并将其显示在屏幕上的任务。在练习获取 https://jsonplaceholder.typicode.com/users 的数据时一切工作正常，我没有收到任何错误。有一次我尝试从这个 api https://www.hatchways.io/api/assessment/students 获取数据.

我的控制台中出现了这个巨大的错误(我确实删除了一些错误消息，因为它真的很大)。

未捕获类型错误:items.map 不是函数

at App.render (App.js:34)
at finishClassComponent (react-dom.development.js:15141)
at updateClassComponent (react-dom.development.js:15096)
at beginWork (react-dom.development.js:15980)
at performUnitOfWork (react-dom.development.js:19102)
at workLoop (react-dom.development.js:19143)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:18350)
at renderRoot (react-dom.development.js:19261)
at performWorkOnRoot (react-dom.development.js:20165)
at performWork (react-dom.development.js:20075)
at performSyncWork (react-dom.development.js:20049)
at requestWork (react-dom.development.js:19904)
at scheduleWork (react-dom.development.js:19711)
at Object.enqueueSetState (react-dom.development.js:12936)
at

App.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356) 在 App.js:16

所以我的问题是，为什么我可以从一个 api 获取数据，但不能从另一个 api 获取数据？是其他 api 有问题还是我做错了什么？我将在下面发布我的代码。

import React, {Component} from 'react';

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

  componentDidMount(){
      fetch('https://www.hatchways.io/api/assessment/students')
          .then(res=> res.json())
          .then(json =>{
              this.setState({
                  isLoaded: true,
                  items: json,
              })
          });
  }


  render(){
      const {isLoaded, items} = this.state;
      if(!isLoaded){
          return <div>loading data...</div>;
      }

      else{           

          return(
              <div className="Data">
                  <ul>
                      {items.map(item=>(
                          <li key={item.students}>
                              name:{item.name}
                          </li>
                      ))};
                  </ul>                   
              </div>

          );
       }

  }

}

export default App;

Answer 1

看起来 https://www.hatchways.io/api/assessment/students API 返回一个具有 students 属性的对象。

所以你的items是一个对象，而不是一个数组，这就是为什么它没有map功能。

要解决此问题，您的获取逻辑可能如下所示:

componentDidMount(){
      fetch('https://www.hatchways.io/api/assessment/students')
          .then(res=> res.json())
          .then(({ students }) => {
              this.setState({
                  isLoaded: true,
                  items: students,
              })
          });
  }