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

【问题标题】：`object' is undefined due to async function that fetched data in useEffect hook in reactjs由于异步函数在 reactjs 中的 useEffect 钩子中获取数据，因此“对象”未定义
【发布时间】：2021-04-12 18:28:13
【问题描述】：

我正在使用axios.get("url") 从api 获取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,
}

如何获取数据并定期更新组件级状态（获取后）？

【问题讨论】：

你能console.log(data) 编辑你的帖子告诉我你得到了什么吗？
看起来你在 useEffect 之后第二次声明了 imageState。这不是主要问题，但您最终需要删除该行。
是否有令人信服的理由不在 fetchAnimal 中执行 setImageState(data.image[0])？
@samuei 是的，这样做也没问题。真正的问题仍然存在于我这里是 typeof(Animal.image) 它给出了 object 但是当我只是 console.log(Animal.image) 然后我得到 Array ["img1",''img2"] .我其实需要map这些图片到div中。
@MichaelHoobler 我将 {data} 分配给组件状态（动物），当我 console.log(Animal) 时，我在控制台中得到一个 object Object { id: 1, image: (1) […], breed: "", isAvailable: true, weight: 100, … }。

标签： javascript reactjs axios react-hooks

【解决方案1】：

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

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

另外，请确保您处理 useEffect 中的 API 错误，否则这可能会在 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;

【讨论】：

【解决方案2】：

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

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

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

【讨论】：