JSON api数据未在React中加载答案

【问题标题】：JSON api data not loading in ReactJSON api数据未在React中加载
【发布时间】：2019-01-26 22:36:14
【问题描述】：

所以我对使用 React 还很陌生，我被分配了从 JSON API 获取数据并将其显示在屏幕上的任务。在练习为https://jsonplaceholder.typicode.com/users 获取数据时，一切正常，我没有收到任何错误。一旦我试图从这个apihttps://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有问题还是我做错了什么？我将在下面发布我的代码。

从 'react' 导入 React, {Component};

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;

【问题讨论】：

标签： javascript json reactjs api

【解决方案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,
              })
          });
  }

【讨论】：