将 .map() 与 useEffect 和 Api 一起使用

Question

我正在尝试使用 useEffect 从 API 中获取一些数据。我成功地获取了数据，但是在设置状态并尝试通过它进行映射后，我只得到 "Can't read map of undefined"。我认为问题在于它是运行我的 .map() 代码，然后才得到响应。我只是不确定如何解决这个问题

这是 api 响应：

data: {count: 87, next: "https://swapi.co/api/people/?page=2", previous: null, results: Array(10)}

这是我的代码

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';
import CharacterMap from './characterMap'

const App = () => {
  let [getChars, setChars] = useState(0);
  useEffect(() => {
    axios.get(`https://swapi.co/api/people/`)
      .then(res => setChars(res) )
  },[]);
 console.log(getChars.data.map((e) => e))
  return (

    <div className="App">
      <CharacterMap info={getChars} />
    </div>
  );
}
export default App;

Answer 1

axios.get 是一个异步函数，您正试图在尚未完成的异步函数之外获取数据。

您可以使用 useEffect 和等于 componentDidUpdate 的依赖数组来获取数据。

使用您期望的相同数据类型初始化了状态，在这种情况下，我们期望您使用空数组初始化了一个数组。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';
import CharacterMap from './characterMap'

const App = () => {
  let [chars, setChars] = useState([]);
  useEffect(async () => {
    try{ 
      let response = await axios.get(`https://swapi.co/api/people/`)
      let data = await response.json();
      setChars(data);
    } catch(error) {
       console.error(error.message);
    }
  },[]);
 // If you want to access the updated state then use this.
  useEffect(() => {
     let newState = chars.map((e) => e); // map your state here
     setChars(newState); // and then update the state
     console.log(newState);
  },[getChars]);

  return (

    <div className="App">
      <CharacterMap info={chars} />
    </div>
  );
}
export default App;

第二个 useEffect 挂钩在每次 state 更新时触发，因此您可以在此处获取更新的 state。

它也会触发一个re-render所以你也可以在return语句中使用map；

或者您可以更新 axios 响应中的数据，然后设置 state。推荐

useEffect(async () => {
    try{ 
      let response = await axios.get(`https://swapi.co/api/people/`)
      let data = await response.json();
      let newState = data.map((e) => e); // map your state here
      setChars(newState); // and then update the state
      console.log(newState);
    } catch(error) {
       console.error(error.message);
    }
  },[]);

Answer 2

保持数组的默认值

let [getChars, setChars] = useState([]);

Answer 3

您正在将数据设置到数组 chars。而不是您在响应中得到的集合数组（results）。

如您定义的那样let [getChars, setChars] = useState([]);

useEffect(async () => {
    axios
    .get(`https://swapi.co/api/people/`)
    .then(res=> setChars(res.data.results))
    .catch(err=> console.log(err))
  },[]);

将 .map() 与 useEffect 和 Api 一起使用

Using .map() with useEffect and Api

javascript

reactjs

use-effect