異步等待調用后，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