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

Question

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

这是我的代码

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之后不会看到更改。您需要等待组件完全重新呈现

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
}

你可以查看这篇文章来更好地理解

如果您仍然希望在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
})
}

}