异步等待调用后反应状态不更新

Question

我正在使用 React Hooks 和 useEffect 从 API 获取数据。我需要连续打 2 个电话。如果我直接 console.log 响应，它会显示正确的响应，但是当我 console.log 状态时，它是空的并且没有更新。我做错了什么？

const [describeFields, setDescribeFields] = useState([]);

useEffect(() => {
const fetchData = async () => {
  await axios
    .all([
      axios.get("someUrl"),
      axios.get("someotherUrl")
    ])
    .then(
      axios.spread((result1, result2) => {
        console.log(result1.data.result.fields); //shows correct response
        setDescribeFields(result1.data.result.fields);
        console.log(describeFields);  //shows empty array      
      })
    );
};
fetchData();
}, []);

Answer 1

如果您想在return 语句之前查看最新的更改，则它不会在此之后显示，因为 setState 是异步的，您的 console.log 在此之前运行 setState

const [describeFields, setDescribeFields] = useState([]);

useEffect(() => {
const fetchData = async () => {
  await axios
    .all([
      axios.get("someUrl")
      axios.get("someotherUrl")
    ])
    .then(
      axios.spread((result1, result2) => {
        console.log(result1.data.result.fields); //shows correct response
        setDescribeFields(result1.data.result.fields);
      })
    );
};
fetchData();
}, []);

console.log(describeFields); //Check here
return(

)

注意：useEffect 中的 [] 数组表示它只会运行一次。如果您想在变量更改时更新，请将其添加为依赖项。

这是工作示例：https://codesandbox.io/s/prod-thunder-et83o