Не удается прочитать свойство 'map' из undefined, почему?

Question

Это мой файл App.js.Я пытаюсь получить данные с помощью fetch () Что мне не хватает?Получение ошибки как TypeError: Невозможно прочитать карту свойств неопределенного ". Что не так? Как я могу получить результат?
Я следую учебному пособиюactjs и продолжаю сталкиваться с проблемой при передаче значения из состоянияодин компонент в другой компонент. При выполнении функции map в компоненте CommentList возникает ошибка «Не удается прочитать свойство map» из undefined. Что может привести к тому, что реквизит станет неопределенным при извлечении данных? Я также попытался установить отладчик, почемуэто не происходит внутри вызова извлечения?

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

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      companyList:[]
    };
  }

  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => { res.json() })
      .then(
        res => {
          this.setState({
            companyList : res
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    return (
      <div className="App">
        1) DataGrid
        <UsingFetch datasource = {this.state.companyList}/>
      </div>
    );
  }
}

export default App;

Это мой файл UsingFetch.js

class UsingFetch extends Component{
  constructor(){
    super();
    this.state = {
      isLoaded:false,
    }
  }

  render() {
    return (
      <div>
        {this.props.datasource.map(item =>
          <div>
            {item.name}
          </div>
        )}
      </div>
    )
  }
}

Это мои файлы App.js и UsingFetch.js. Я пытаюсьполучить данные, используя fetch (), что я пропускаю? Ошибка при получении:

Ошибка типа: не удается прочитать карту свойств неопределенного "

Что не так?Как мне получить результат?

Answer 1

Поскольку вы ничего не возвращаете из первого блока then. Таким образом, res во втором then блоке - undefined. Вы должны использовать return в

then(res => { res.json() })

Изменить на

then(res => res.json())

или

then(res => { return res.json() })

Answer 2

Вы не используете isLoaded в вашем компоненте?Вы тоже ничего не пропускаете.Вы должны передать свое состояние вниз и затем назначить его в setState.

В вашем приложении:

<UsingFetch datasource = {this.state.companyList} isLoaded={this.state.isLoaded}/>

И в вашем UsingFetch

constructor(){
  super();

   this.state = {
      isLoaded:this.props.isLoaded,
 }
   }

Или просто проверьте, существует ли источник данных или isLoaded.

<div>
{this.props.datasource && this.props.isLoaded?
<React.Fragment>
                     {this.props.datasource.map(item =>
                     <div>
                         {item.name}
                     </div>
                     )}
 </React.Fragment>
:
<React.Fragment></React.Fragment>