由于异步 function 在 reactjs 中的 useEffect 钩子中获取数据，因此未定义“对象”

Question

我正在使用axios.get("url")从api获取object 。 object 已成功提取（处于Animal状态），但有一个组件级别state (imageState)需要使用带有提取数据的setState进行更新。
代码：
零件：

import React,{useEffect, useState} from 'react'
import axios from 'axios'
const AnimalDetail = ({match}) => {
    const [Animal ,setAnimal ] = useState({})
    const Id = parseInt(match.params.id)
    const [imageState, setImageState] = useState ("");
 
useEffect(()=>{
            const fetchAnimal = async () => {
                const {data} = await axios.get(`/api/animals/${Id}`)
                setAnimal(data)
            }
            fetchAnimal()
            // setImageState(Animal.image[0])   // need to access first index of image object
    },[])

    useEffect(()=>{

   setImageState(Object.values(Animal.image)[0])  // error cant convert undefined to object
}
   
    return (
        <>
       <h2>imageState </h2>  //undefined
        <h2>{typeof(Animal.image)}</h2>  //gives object
       </>
  )
}
export default AnimalDetail

后端 Api：

{"id":2,
"image":["/image.jpg","/image2.jpg"],
"price":60000,
"breed":"",
"isAvailable":true,
"weight":110,
}

我如何获取数据并定期更新组件级别 state（获取后）？

Answer 1

您可以尝试关注，也许这可以帮助您。 删除了第二个useEffect并更新了第一个 useEffect 中的图像useEffect 。

而且我还可以看到，您已声明const [imageState, setImageState] = useState (""); 两次。 您可以删除第二个。

另外，请确保您处理了 useEffect 中的useEffect错误，否则这可能会在 API 失败时中断应用程序。

import React, { useEffect, useState } from 'react';
import axios from 'axios';
const AnimalDetail = ({ match }) => {
  const [Animal, setAnimal] = useState({});
  const Id = parseInt(match.params.id);
  const [imageState, setImageState] = useState('');

  useEffect(() => {
    const fetchAnimal = async () => {
      const { data } = await axios.get(`/api/animals/${Id}`);
      setAnimal(data);
      setImageState(data.image[0]);
    };
    if (Id) {
      fetchAnimal();
    }
  }, [Id]);

  return (
    <>
      <h2>imageState </h2> //undefined
      <h2>{typeof Animal.image}</h2> //gives object
    </>
  );
};
export default AnimalDetail;

Answer 2

您的代码在第二个 useEffect 中有一些错误。 你可以使用这个：

     useEffect(() => {
if (Animal) setImageState(Object.values(Animal.image)[0]); // error cant convert undefined to object
      }, [Animal]);

这是因为 Animal 应该首先具有价值。 并且您在代码中定义了两次 imageState。 第一个就够了。