更新状态后渲染组件答案

【问题标题】：render Component after updating the state更新状态后渲染组件
【发布时间】：2022-06-30 16:58:10
【问题描述】：

你在下面看到的是我的 App.js 组件

export default function App() {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    try {
      const jwt = localStorage.getItem("token");
      const user = jwtDecode(jwt);
      setUserData(user);
      console.log("emp1", userData);
    } catch (ex) {}
  });

  console.log("emp2", userData);
  render(
    <BrowserRouter>
      <ToastContainer
        rtl
        position="top-left"
        style={{ width: 520, fontSize: 15 }}
      />
      <div className="App">
        <Navbar userData={userData} />
      </div>
    </BrowserRouter>,
    document.getElementById("root")
  );
}

正如您在顶部看到的，我为我的状态定义了空值，我想用我从解码令牌中获得的对象更新状态但我不知道为什么状态不更新？

注意：我想将状态作为道具发送到 Navber.js 组件

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

需要在useEfect中设置依赖数组：

useEffect(() => {
    try {
      const jwt = localStorage.getItem("token");
      const user = jwtDecode(jwt);
      setUserData(user);
      console.log("emp1", userData);
    } catch (ex) {}
  }, []);

[] in useEffect means:

如果你想运行一个效果并只清理一次（在挂载和 unmount)，您可以传递一个空数组 ([]) 作为第二个参数。这个告诉 React 你的效果不依赖于 props 的任何值或状态，因此它永远不需要重新运行。这不作为特殊处理 case — 它直接遵循依赖项数组的方式有效。

【讨论】：

我这样做了，但是当我记录 UserDate 时，它显示空值或初始值，这意味着它没有更新