Блог

Главная - Вопросы по программированию - Извлечение данных из API с использованием Axios на react.js . Что я делаю не так?

Извлечение данных из API с использованием Axios на react.js . Что я делаю не так?

#reactjs #axios

#reactjs #axios

Вопрос:

Я пытаюсь извлечь данные из приведенного ниже массива. Мой код находится под моим console.log. Что я делаю не так? При попытке извлечь данные ничего не отображается.

 (356) […]
​
[0…99]
0: Object { TournamentID: 405, Name: "The Presidents Cup", StartDate: "2021-09-30T00:00:00", … }​​
1: Object { TournamentID: 453, Name: "Tour Championship", StartDate: "2021-09-02T00:00:00", … }​​
2: Object { TournamentID: 452, Name: "BMW Championship", StartDate: "2021-08-26T00:00:00", … }
​​

Ниже приведен код, который я использую для извлечения данных.

 
function App() {
  const [data, setData] = useState([])

  useEffect(()=>{
    axios
    .get('https://api.sportsdata.io/golf/v2/json/Tournaments?key=72259e02756442d38c6b837dd8625e4f')
    .then((res)=> {
      
     console.log(res.data)
     setData(res.data)
})

  },[])

  return (
    
    <div className="App">
        
        <div className='container'>
        
        <h1>{data.Name}</h1>
        

      </div>
      
    </div>
    
  );
}

export default App;

Комментарии:

1. Вы используете data — это объект, но, похоже, это массив, вы должны использовать map для перебора элементов. В данном случае данные. Имя не определено

Ответ №1:

Вам нужно сопоставить массив данных с чем-то вроде этого:

 return (
  <div className="App">
    <div className='container'>
      {data.map(item => <h1 key={item.TournamentID}>{item.Name}</h1>)}
    </div>
  </div>
);

Вам также нужен атрибут key .

Комментарии:

1. Однобуквенные переменные — не лучший подход, даже здесь. Лучше измените его на item => или что-то в этом роде.

2. Я согласен. Я обновлю ответ. Это связано с использованием общих терминов, таких как data — если бы это был мой код, я бы предложил изменить data на items (множественное число указывает на массив или коллекцию), и d это стало item бы .