时间戳

首页 > 解决方案 > 如何确保刷新页面后状态立即更新？

reactjs - 如何确保刷新页面后状态立即更新？

问题描述

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

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; ```

标签： reactjsreact-hooks

解决方案

注意useEffect，如果第二个参数是 a []，这意味着效果函数只会在组件渲染后运行一次。要解决这个问题，您应该取出 []。

如果您希望基于某些变量重新运行效果，则可以将其放入该依赖数组中（例如 [someState, someProps, ...]）

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

推荐阅读