当我尝试通过在react中使用使用效率从API获取数据时，我会发现问题

Question

const [users, setUsers] = useState([]);
const getUsers = async () => {
    const URL = "https://jsonplaceholder.typicode.com/users";
    const response = await fetch(URL);
    const data = await response.json();
    console.log(data); // return 10 array . 
    setUsers(data);
    console.log(users); // return empty Array 
};
useEffect(() => {
    getUsers();
}, []);

当我运行此代码并重新加载浏览器时，数据变量显示了10个数组（这是我期望的），并且用户状态不会返回空数组（这就是问题）。然后，我正在更改代码上的某些内容，然后进入浏览器，数据变量，用户表示两者都显示10个数组。 这意味着我试图告诉您，当我首次重新加载浏览器时，状态不是从数据变量设置的。

Answer 1

设置状态是一个异步过程。这就是为什么在调用setusers（）之后看不到即时效果的原因。相反，您可以在代码中添加另一个usefect，并在添加此使用使用后查看发生的更改<

// ... other code
useEffect(() => {
    // this will run after the 'users' has been changed
    console.log("Users", users)
}, [users]);
// ...

/code 您会看到用户将在更新后打印。