Извлечение данных с помощью React Hooks - Невозможно прочитать свойство map из undefined - PullRequest
Новая
       5

Извлечение данных с помощью React Hooks - Невозможно прочитать свойство map из undefined

1 голос
/ 07 февраля 2020

Попытка получить данные из API НХЛ с использованием React Hooks.

Ссылка на CodeSandbox .

Когда я закомментирую тег и его содержимое в ответе Скажите, что мой консольный журнал успешно извлекает API. Тем не менее, я получаю сообщение об ошибке в консоли, когда содержимое тега (оператор .map) говорит: «Не удается прочитать свойство« карта »неопределенного».

Пытаясь выяснить, почему отображается эта ошибка, и почему я не могу отобразить данные, определенные из API.

Приложение. JS

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

import "./styles.css";

function App() {
  const [data, setData] = useState({ people: [] });
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        "https://statsapi.web.nhl.com/api/v1/people/8475166?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA"
      );
      setData(result.data.people);
      console.log(result.data.people);
    };
    fetchData();
  }, []);

  return (
    <ul>
      {data.people.map(item => (
        <li key={item.objectID}>
          <p>{item.id}</p>
          <p>{item.primaryNumber}</p>
        </li>
      ))}
    </ul>
  );
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ответы [ 2 ]

4 голосов
/ 07 февраля 2020

Полагаю, это должно быть 

setData({ people: result.data.people });

Вы устанавливаете данные в свойстве объекта под названием people в переменной состояния.

0 голосов
/ 07 февраля 2020

Проблема с setData(result.data.people)!

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

Исходное состояние: data = {people: []} (так что теперь вы можете отобразить как: data.people)

В использовании эффект: data = result.data.people

Таким образом, решение либо вы меняете начальное состояние, а затем измените как l oop. 

const [data, setData] = useState([]);  // Line #8

setData(result.data.people);  // Line # 14
                              // Line # 22
{data.map(item => (    
 <li key={item.objectID}>
   <p>{item.id}</p>
   <p>{item.primaryNumber}</p>
 </li>
))}

, или вы можете изменить способ назначения после получения результата. 

setData({people: result.data.people})

Я бы лично предпочел первое решение, так как не вижу причин, чтобы данные были объектами. Или я мог бы просто назвать это "люди" 101

...