React 组件的 return 依赖于 useEffect 的数据

Question

旧标题：React useEffect 不会在页面重新加载时运行

useEffect(()=>{console.log("I ran")}, []) // should run once

如果我导航到包含该组件的页面，它会运行，但如果我重新加载该页面，它不会再次运行。

即使我重新加载页面，我如何获得运行的效果？编辑：重新加载页面对我来说意味着 按 F5

完整组件

const Lobby = () => {
  const [result, setResult] = useState();

  const { joinedLobby, setCurJoinedLobby } = useContext(JoinedLobbyContext);

  useEffect(() => {
    if (joinedLobby !== undefined)
      sessionStorage.setItem('joinedLobby', JSON.stringify(joinedLobby));

    const storedJoinedLobby =
      sessionStorage.getItem('joinedLobby') !== null
        ? JSON.parse(sessionStorage.getItem('joinedLobby'))
        : undefined;

    if (joinedLobby === undefined && storedJoinedLobby !== undefined) {
      setCurJoinedLobby(storedJoinedLobby);
    }

    if (joinedLobby === undefined) return setResult(<div>Bad Link</div>);

    setResult(<div>Some stuff here</div>);
  }, []); // will be [joinedLobby] in the future

  return <div>{result}</div>
};

代码沙盒

Cut down example, clone and run locally to get session store

Answer 1

useEffect 运行 AFTER 每次渲染。

因此在渲染将无法工作之前 useEffect 中设置渲染所依赖的数据。

我能想出的最好的解决方案是设置状态来跟踪组件是否是第一次渲染，这样组件的初始 return 不依赖于数据将由 useEffect.

设置

Answer 2

我不确定您是否假设 useEffect 不是运行，因为您收到 result is undefined 错误。但是，如果是这种情况，则需要为 result const 分配默认值，因为 useEffect 在第一次尝试渲染后变为运行。

所以

const [result, setResult] = useState({})

无论您是从某处导航还是重新加载，这都将始终有效。无论如何，您都在 useEffect 中设置了正确的状态。

https://codesandbox.io/s/busy-williams-j5spe?file=/src/Lobby.jsx

React 组件的 return 依赖于 useEffect 的数据

React Component's return relies on data from useEffect

javascript

reactjs

react-hooks

use-effect

完整组件

代码沙盒