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

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.logsetState

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