在 React 中，如何进行单个 api 调用、将结果设置为状态变量并显示它？

Question

我正在编写一个 React 应用程序，我需要在其中进行单个异步 api 调用，将结果保存到状态变量并显示结果。我正在使用一个 axios 实例，其中 api 调用的响应是一个嵌套对象。例如：

{
    kanji:
        {character: "", stroke:""},
    quote: "string"
}

到目前为止，我有以下代码可以成功 console.log homeData 对象。但是我收到错误消息：'TypeError: homeData is undefined'.

const Home = () =>{

    const [homeData, setHomeData] = useState({}) 

    const getHomeData = async()=>{
        instance.get("/data")
        .then(res =>{
            setHomeData(res.data)
        })
        .catch(error =>{
            console.log(error)
        })
    }
    
    useEffect(()=>{
        getHomeData()
    }, [])

    console.log(homeData)
    
    return(
        <>
          <p>{homeData}<p>
        </>
    )
}

这似乎是一个承诺问题，但我不确定如何解决它。提前感谢您的帮助。

Answer 1

这不是承诺问题，它必须与生命周期方法的顺序有关运行。 useEffect 在组件渲染后运行s。这意味着当组件首次呈现时，homeData 是一个空对象。 homeData 将出现在第二个渲染中。以下代码首先检查 homeData 是否存在，如果存在，则显示汉字字符。另请注意，您不能只将原始对象显示到 dom 中，因此您必须通过属性访问 homeData 才能显示

const Home = () =>{

    const [homeData, setHomeData] = useState({}) 

    const getHomeData = async()=>{
        instance.get("/data")
        .then(res =>{
            setHomeData(res.data)
        })
        .catch(error =>{
            console.log(error)
        })
    }
    
    useEffect(()=>{
        getHomeData()
    }, [])

    console.log(homeData)
    
    return(
        <>
          <p>{homeData && homeData.kanji.character}<p>
        </>
    )
}

在 React 中，如何进行单个 api 调用、将结果设置为状态变量并显示它？

In React, how can I make a single api call, set the result to a state variable, and display it?

javascript

asynchronous

reactjs