当我尝试在反应中使用 useEffect 从 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();
}, []);

当我运行这段代码并重新加载浏览器时，data变量显示了10个数组(这是我所期望的)，并且用户状态没有返回空数组(这就是问题所在)。然后我在代码上做了一些改变，来到浏览器，data变量和userstate都显示了10个数组。这意味着我试图告诉你，当我第一次重新加载浏览器时，状态不会从数据变量设置。查看控制台结果以更好地理解

Answer 1

设置状态是一个异步过程。这就是为什么调用setUsers()后不会立即看到效果的原因。相反，您可以在代码中添加另一个useEffect，并查看users

的变化。

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

添加此useEffect后，您将看到users在更新后将被打印。