异步等待调用后，React状态不会更新

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是async你的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