我如何确保在刷新页面后立即更新状态?

Question

当我刷新页面时，状态没有更新，尽管当我重新启动开发服务器时，它有时会更新。有人能帮我调试吗?

function App() {
const [data, setData] = useState([]);
const [q, setQ] = useState("");
useEffect(() => {
console.log('triggered')
fetch('http://localhost:5000/getCollege').then(
response =>
response.json())
.then(json => {
setData(json)
console.log(data.length)
});


}, [])
return (
<div>
<div>filter goes here</div>
<div>datatable goes here</div>
</div>
);
}
export default App; ```

Answer 1

注意在useEffect中，如果第二个参数是[]，这意味着效果函数将只运行一次在组件渲染之后。要处理，你应该把[]拿出来。

如果你想根据一些变量重新运行效果，你可以把它放在依赖数组中(例如:[someState, someProps，…])

useEffect(() => {
console.log('triggered')
fetch('http://localhost:5000/getCollege').then(
response =>
response.json())
.then(json => {
setData(json)
console.log(data.length)
});
})