Cannot read property 'map' of undefined. Ошибка: пустой массив

159

25 июня 2019, 16:40

Знаю такой вопрос уже есть в англоязычной stackoverflow.. Но мне не помогло ответ.. Думаю, ошибка в получение данных от сервера.. Я сделал эту же вопрос(с этим кодом) на другой сервер(https://hn.algolia.com/api/v1/search?query=).. Все работал как надо.. Код:

const API = 'http://46.101.146.101:8081/universities'; 
 
 
class App extends React.Component { 
  constructor(props) { 
    super(props); 
 
    this.state = { 
      data: [], // Попробовал без массива)) 
      isLoading: false, 
      error: null, 
    }; 
  } 
 
  componentDidMount() { 
    this.setState({ 
      isLoading: true 
    }); 
 
    fetch(API) 
      .then(response => { 
        if (response.ok) { 
          return response.json(); 
        } else { 
          throw new Error('Что-то пошла не так...'); 
        } 
      }) 
      .then(responseJSON => { 
        this.setState({ 
          data: responseJSON.data, 
          isLoading: false 
        }) 
      }) 
      .catch(error => this.setState({ 
        error, 
        isLoading: false 
      })); 
  } 
 
  render() { 
    const { 
      data, 
      isLoading, 
      error 
    } = this.state; 
 
    if (isLoading) { 
      return <p className = 'SMS' > Loading... < /p>; 
    } 
 
    if (error) { 
      return <p className = 'SMS' > { 
        error.message 
      } < /p>; 
    } 
 
    return ( < 
      div id = 'container' > { 
        data.map(data => 
          < 
          div className = "content" 
          key = { 
            data.id 
          } > 
          < 
          img src = { 
            data.main_image_url 
          } 
          /> < 
          h3 className = "title" > { 
            data.title 
          } < /h3> < 
          div className = "description_content" > 
          < 
          p className = "description" > { 
            data.description 
          } < /p> < / 
          div > < 
          /div> 
        ) 
      }; < 
      /div> 
    ); 
  } 
} 
 
 
const Container = document.querySelector('main'); 
ReactDOM.render( < App / > , Container);

<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> 
<script src="https://soulwire.github.io/sketch.js/js/sketch.min.js"></script> 
 
<main></main>

Думаю, я неправильно получаю данные от сервера или не понимаю в чем проблема.. Как мне это исправит? A когда сделал data: [[]] требовал ключ.. Но я ключ сделал..

P.S. Кто может изменить вопрос чтобы возможно было выполнит код?

Answer 1

У вас был не верный запрос к АПИ.

const API = 'http://46.101.146.101:8081/universities/?format=json'; 
 
 
class App extends React.Component { 
  constructor(props) { 
    super(props); 
 
    this.state = { 
      data: [], // Попробовал без массива)) 
      isLoading: false, 
      error: null, 
    }; 
  } 
 
  componentDidMount() { 
    this.setState({ 
      isLoading: true 
    }); 
 
    fetch(API) 
      .then(response => { 
        if (response.ok) { 
          return response.json(); 
        } else { 
          throw new Error('Что-то пошла не так...'); 
        } 
      }) 
      .then(responseJSON => { 
        this.setState({ 
          data: responseJSON, 
          isLoading: false 
        }) 
      }) 
      .catch(error => this.setState({ 
        error, 
        isLoading: false 
      })); 
  } 
 
  render() { 
    const { 
      data, 
      isLoading, 
      error 
    } = this.state; 
 
    if (isLoading) { 
      return <p className = 'SMS' > Loading... < /p>; 
    } 
 
    if (error) { 
      return <p className = 'SMS' > { 
        error.message 
      } < /p>; 
    } 
 
    return ( < 
      div id = 'container' > { 
        data.map(data => 
          < 
          div className = "content" 
          key = { 
            data.id 
          } > 
          < 
          img src = { 
            data.main_image_url 
          } 
          /> < 
          h3 className = "title" > { 
            data.title 
          } < /h3> < 
          div className = "description_content" > 
          < 
          p className = "description" > { 
            data.description 
          } < /p> < / 
          div > < 
          /div> 
        ) 
      }; < 
      /div> 
    ); 
  } 
} 
 
 
const Container = document.querySelector('main'); 
ReactDOM.render( < App / > , Container);

<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> 
<script src="https://soulwire.github.io/sketch.js/js/sketch.min.js"></script> 
 
<main></main>