Reactjs （REACT）如何从另一个组件重新渲染组件（使用更新的值）？

如何使组件使用本地存储中的新值重新呈现另一个组件？ 在登录组件从后端API接收到用户数据并将其放入本地存储后，我尝试更新一些Navbar元素

我已经尝试过几种方法，比如使用useEffect查找从登录组件发送的道具中的更改，我仍然需要手动刷新以查看导航栏中的更改

import React，{useState，useffect}来自“React”；
导入“../style/index.scss”；
导入“../style/Navbar.scss”；
函数导航栏（{refresh}）{
const[user，setUser]=useState（）；
//导航栏链接数组
设navBarItems=[
{
标题:"家",，
url:“/home”，
类别：“导航链接”
},
{
标题：“成员”，
url:“/members”，
类别：“导航链接”
},
{
标题：“登录”，
url:“/members/login”，
类别：“导航链接”
},
{
标题：“关于我们”，
url:“/aboutUs”，
类别：“导航链接”
},
{
url:“/searchMembers”，
类：“searchIcon”，
}
];
useffect（（）=>{
//console.log（“：：：”+用户+”+刷新）；
setUser（JSON.parse（localStorage.getItem（'loggedInUser'））；
}，[刷新]；
返回(
{navBarItems.map（（项目，索引）=>{
返回(
)
})}
);
}
导出默认导航栏您将拥有一个包含状态的父组件，该状态将传递给两个子组件。当您的api返回数据时，您将设置本地存储并更改状态，例如

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

const NavBar = ({yourState}) => <p>{yourState}</p>

const Login = ({yourState, setYourState}) => <button onClick={() => setYourState("world!")}></button>

const App = () => {
  const [yourState, setYourState] = useState('Hello')
  return (
    <div>
      <Login 
        yourState={yourState}
        setYourState={setYourState}
      />
      <NavBar 
        yourState={yourState}
      />
    </div>
  )
}

export default App;

从“/logo.svg”导入徽标；
导入“/App.css”；
从“react”导入{useState}；
常量NavBar=（{yourState}）=>{yourState}

const Login=（{yourState，setYourState}）=>setYourState（“world！”）}>
常量应用=（）=>{
const[yourState，setYourState]=useState（'Hello'）
返回(
)
}
导出默认应用程序；
工作起来很有魅力。可能是想得太多了，谢谢！很高兴听到这个消息！你介意把我的答案标为已解决吗？