reactjs - Reactjs 更新祖父母状态
问题描述
我刚刚开始使用 ReactJs 进行开发,并且一直在关注 serverless-stack.com 教程。我已准备好扩展应用程序并创建一个带有 n 个子组件的模板,但在管理孙子组件之间的用户会话时遇到了麻烦。
我有管理用户会话的 App.js。但是我在孙子组件中有我的注销按钮,我无法让它调用 App.js signOut() 函数。
应用程序.js
function App(props) {
const [isAuthenticating, setIsAuthenticating] = useState(true);
const [isAuthenticated, userHasAuthenticated] = useState(false);
useEffect(() => {
onLoad();
}, []);
const onLoad = async () => {
try {
await Auth.currentSession();
userHasAuthenticated(true);
} catch (e) {
if (e !== "No current user") {
alert(e);
}
}
setIsAuthenticating(false);
}
const signOut = async () => {
console.log("Signing out.");
await Auth.signOut();
userHasAuthenticated(false);
console.log("signed out.");
};
return (
<BrowserRouter>
<Switch>
...
<Layout
path='/'
name='Home'
{...props}
onLogout={signOut}
/>
</Switch>
</BrowserRouter>
);
}
export default withRouter(App);
我的布局组件有一堆不同的组件,如页眉、页脚、导航等。
function Layout(props) {
return (
<div className='app'>
...// header component
<NavBar
onLogout={props.onLogout}
isAuthenticated={props.isAuthenticated}
/>
... //main body and footer components
</div>
);
}
export default Layout;
最后是我的 NavBar 孙子组件:
function NavBar(props) {
useEffect(() => {
onLoad();
}, []);
async function onLoad() {
console.log("Is authed at navbar? " + props.isAuthenticated);
}
return (
<React.Fragment>
<Nav className='ml-auto' navbar>
.. // other NavItems
<UncontrolledDropdown nav direction='down'>
<DropdownToggle nav>
<img
src={"../../assets/img/usermenu.png"}
className='img-avatar'
alt='user menu icon'
/>
</DropdownToggle>
<DropdownMenu right>
...
<DropdownItem onClick={props.onLogout}>
<i className='fa fa-lock'></i> Logout
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</React.Fragment>
);
}
export default NavBar;
当我加载站点并进行身份验证时,控制台会写出“在导航栏上经过身份验证?是的”。所以我知道孙子正确地获得了isAuthenticated
状态。但是当我单击注销按钮时,没有任何反应,控制台中也没有出现警告或错误。
解决方案
一开始在Navbar组件中看到了这个功能
async function onLoad() {
console.log("Is authed at navbar? " + props.isAuthenticated);
}
我跟踪看看你从哪里经过props.isAuthenticated
。我确实在这里找到了
<Layout
path='/'
name='Home'
props={props}
onLogout={signOut}
/>
为什么你有一个名为props
??? 如果您想将传递给父级的所有道具向下传递给其子级(传输道具),请使用传播运算符。你可以在这里看到答案:What do it mean ...rest in React JSX
推荐阅读
- javascript - 使用 Javascript Reduce 处理对象
- android - Jetpack Compose LazyList 未正确显示项目
- android - 撰写:beta08 打破可点击
- google-sheets - 将 URL 行移动到正确的根域标题
- laravel - 有没有办法让我选择的选项保留在显示中?
- reactjs - 盖茨比图片中 Logo 道具上的 Switch 语句
- python - LinkedList 打印元素并将元素移动到另一个 LinkedList
- javascript - 在 js 的谷歌图表中使用烧瓶返回的数据
- c# - “Guid.NewGuid”违反了协调器确定性代码约束
- c++ - 难以理解 C++ 中的 const(无法绑定非 const 左值引用)