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

Question

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

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

到目前为止，我有以下代码，我可以在其中成功地 console.log homeData object。 但是我收到错误：'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>
        </>
    )
}

这似乎是一个 promise 问题，但我不确定如何解决。 提前谢谢你的帮助。

Answer 1

这不是 promise 问题，它必须与生命周期方法运行的顺序有关。 useEffect 在组件渲染后运行。 这意味着当组件第一次渲染时，homeData 是一个空的 object。homeData 将出现在第二次渲染中。 以下代码首先检查 homeData 是否存在，如果存在，则显示汉字字符。 另请注意，您不能只将原始 object 显示到 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>
        </>
    )
}