Quiero saber que tengo un componente principal y dos componentes secundarios y estos componentes secundarios están separados según el rol del usuario. He pasado el estado principal en estos componentes secundarios. Al principio, ambos componentes secundarios tienen el mismo valor de estado, pero si actualizo el valor de estado en un componente secundario, no actualizará el valor de estado en otro componente. Aquí hay un código de ejemplo.

 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;

Componente de demostración1:

importar React desde "react";

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

Componente de demostración 2:

 import React from "react"; const Demo2 = ({ staVal }) => { return <div>demo2:{staVal}</div>; }; export default Demo2;