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

Question

I want to know I have one parent component and two child components and these child components are separated according to the user role. I have passed the parent state in these child components. In the beginning, both child components have the same state value, but if I update the state value in one child component, it will not update the state value in another component why. Here is an example code.

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 component:

import React from "react";

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

export default Demo1;

Demo 2 component:

import React from "react";

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

export default Demo2;

Answer 1

Accessing localStorage is a side effect .
Side effects cannot be called from the render method (for Class components) or the top level (function components).

In your code, access the localStorage inside useEffect(()=>{}, []) or
inside componentDidMount if you want to make it a class component.

Answer 2

use the useEffect to get the item from the local storage.

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>

); };