即使在 setState 之后，状态数据仍然保持以前的状态

Question

当我从我的 api 成功获取数据时，我可以使用 console.log 显示它，但不知何故在我使用 setState 后，状态仍然保留以前的数据。所以当页面加载时，console.log(data) 有一个包含来自 api 的数据的对象数组，但是 setRute 之后的 console.log(rute) 仍然是 returns 空数组。这是为什么？

这是我的代码

const MasterRute = () => {
  const [rute, setRute] = useState([]);

  const getRute = async () => {
    const response = await fetch('http://localhost:8080/rute');
    const data = await response.json();
    // console.log(data); // [{id:"1", name:"AAA"}, {id: "2", name: "BBB"}]
    setRute(data);
    // console.log(rute); // [] ===> why is this empty?
  }
}

感谢任何帮助

Answer 1

useState 是异步的，所以您不会看到 setRute 之后的变化。您需要等待组件 re-rendered 完全

const MasterRute = () => {
  const [rute, setRute] = useState([]);

  const getRute = async () => {
    const response = await fetch('http://localhost:8080/rute');
    const data = await response.json();
    // console.log(data); // [{id:"1", name:"AAA"}, {id: "2", name: "BBB"}]
    setRute(data);
    
  }
  
  console.log(rute); //data updated on rendering
}

您可以查看this article以更好地理解

如果你还想看setRute之后的数据。您可以在 setTimeout

内得到结果

const MasterRute = () => {
  const [rute, setRute] = useState([]);

  const getRute = async () => {
    const response = await fetch('http://localhost:8080/rute');
    const data = await response.json();
    // console.log(data); // [{id:"1", name:"AAA"}, {id: "2", name: "BBB"}]
    setRute(data);
    setTimeout(() => {
       console.log(rute); //data updated
    })
  }
  
}

即使在 setState 之后，状态数据仍然保持以前的状态

state data still keeps the previous state even after setState

reactjs

react-state