如果在 reactjs 中的这些子组件之一中更新，为什么两个子组件的角色基础父级具有不同的状态

Question

我想知道我有一个父组件和两个子组件，这些子组件根据用户角色分开。 我已经在这些子组件中传递了父状态。 一开始，两个子组件具有相同的状态值，但是如果我更新一个子组件中的状态值，它不会更新另一个组件中的状态值，这是为什么。 这是一个示例代码。

import React, { useEffect, useState } from "react";
import Demo1 from "./Demo1";
import Demo2 from "./Demo2";

const Demo = () => {
 
  const [staVal, setStaVal] = useState("hi");

  console.log(staVal);
  
  const user = JSON.parse(localStorage.getItem("auth"));

  return (
    <div>
      {user.role === "user" ? (
        <Demo1 staVal={staVal} handler={() => setStaVal("google")} />
      ) : (
        <Demo2 staVal={staVal} />
      )}
    </div>
  );
};

export default Demo;

Demo1 组件：

从“反应”导入反应；

const Demo1 = ({ staVal, setStaVal, handler }) => {
  return (
    <>
      <div>demo1:{staVal}</div>
      <button onClick={handler}>clik</button>
    </>
  );
};

export default Demo1;

演示 2 组件：

import React from "react";

const Demo2 = ({ staVal }) => {
  return <div>demo2:{staVal}</div>;
};

export default Demo2;

Answer 1

访问localStorage是一个副作用。
不能从render方法（对于 Class 组件）或顶层（函数组件）调用副作用。

在您的代码中，访问useEffect(()=>{}, [])或
如果您想让它成为类组件，请在componentDidMount内。

Answer 2

使用 useEffect 从本地存储中获取项目。

const [user,setUser]=useState(null);
useEffect(()=>{
  const currentUser = JSON.parse(localStorage.getItem("auth"));
  setUser(currentUser)
 },[])

 return (
<div>
  {user.role === "user" ? (
    <Demo1 staVal={staVal} handler={() => setStaVal("google")} />
  ) : (
    <Demo2 staVal={staVal} />
  )}
</div>

); };