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中的[]数组表示它将仅运行一次。如果要在变量更改时进行更新，则将其添加为依赖项。

这是工作示例：Playground

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

1 个答案: