我是否必须在 useState 中设置每个属性的初始值？

Question

我是 React 的初学者。我有一个向 API 发出请求并将响应作为 JSON 返回的函数

 const [datastate, setData] = useState({});
 const getData = async () => {
     const response = await fetch(`https://MY_API_REQUEST_URL_HERE`);
     const data = await response.json();
     setData(data);
     console.log(data);      // works
     console.log(datastate); // Empty object is returned in console 
 }

我想使用从 API 返回的响应来初始化我的 datastate，即使用 data 变量。

但我最近发现它返回空对象的原因是因为我没有在 useState 中定义任何属性，所以准确地说我必须这样做：

const [datastate, setData] = useState({
    username: "",
    firstname: "",
    lastname: "",
});

但问题是API返回的数据很复杂，它包含一个对象数组，一个对象包含另一个对象包含数组。所以我在想有没有捷径可以做到这一点，那就是我不必在 useState 中定义我想使用的每个属性。

App.js：

import React, {useEffect, useState} from "react";
import Data from "./Data";
import './App.css';

function App() {
    const [datastate, setData] = useState({});
    useEffect(() => {
        getData();
    }, [datastate]);  // Added as suggested by William Wang

    const getData = async () => {
        const response = await fetch(`https://api.edamam.com/api/nutrition-data?app_id=${process.env.REACT_APP_APP_ID}&app_key=${process.env.REACT_APP_APP_KEY}&ingr=1%20pie%20pizza`);
        const data = await response.json();
        setData(data);
        console.log(data);
        console.log(datastate);
    }
    return (
        <div className="App">
            <form className="search-form">
                <input className="search-bar" type="text" />&nbsp;
                <button className="search-button" type="submit">Search</button>
            </form>
            <Data data={datastate} />
        </div>
    );
}
export default App;

请注意返回里面的JSX是不完整的，请关注返回里面的Data组件

数据.js

import React from "react";

function Data({data}) {
    return(
        <div>
            <p>
                {data.users[0].username}
            </p>
        </div>
    );
}
export default Data;

另请注意，data.users 会出现错误，就好像没有将任何道具传递给 Data 组件一样。

Answer 1

setData是异步方法，所以不能在setData()之后立即获取datastate的更新值

const getData = async () => {
     const response = await fetch(`https://MY_API_REQUEST_URL_HERE`);
     const data = await response.json();
     setData(data);
     console.log(datastate); // old value of `datastate` will be displayed.
 }

您应该使用useEffect() 来获取更新后的值。

useEffect(() => {
  console.log(datastate);
}, [datastate]);

---

更新

    useEffect(() => {
        getData();
    }, []);

    useEffect(() => {
        console.log(datastate);
    }, [datastate]);  // Added as suggested by William Wang

    const getData = async () => {
        const response = await fetch(`https://api.edamam.com/api/nutrition-data?app_id=${process.env.REACT_APP_APP_ID}&app_key=${process.env.REACT_APP_APP_KEY}&ingr=1%20pie%20pizza`);
        const data = await response.json();
        setData(data);
        console.log(data);
        console.log(datastate); // This is wrong way to check the updated datastate value.
    }