Question

我有一个AppBar组件，如下所示

<AppBar title="Shopping List App" showMenuIconButton={true}
                    iconElementRight={checkAuthenticationToken()?<Menu/>:null}
                    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
                />

iconElementRight只应在Menu评估为真之后呈现checkAuthenticationToken()组件，并在登录后进行评估。但是，它不是，我必须手动刷新浏览器才能显示它。我相信这是因为AppBar组件没有任何变化，因此不再调用它的render方法。我的问题是如何在成功登录后刷新AppBar或全部ReactDom？

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <MuiThemeProvider muiTheme={getMuiTheme(muiTheme)}>
                <AppBar title="Shopping List App" showMenuIconButton={true}
                    iconElementRight={checkAuthenticationToken()?<Menu/>:null}
                    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
                />
                <div className="container">
                    <Switch>
                        <Route exact path="/" render={requireLogin}/>
                        <Route path="/login" render={isLoggedIn}/>
                        <Route path="/register" component={RegisterForm}/>
                        <Route path="/shoppinglists" render={requireLogin}/>
                        <Route path="/:id/shoppinglist_items" render={itemsRequireLogin}/>
                        <Route component={NotFound}/>
                    </Switch>
                </div>
            </MuiThemeProvider>
        </BrowserRouter>
    </Provider>
    , document.getElementById('root'));

Answer 1

如果您的组件未连接到redux商店，则状态更改不会触发新的呈现，因此您无法更新组件。

现在的方式，它只会在render方法被调用时执行此检查...

一种可能的解决方案是将您的AppBar组件包装到另一个连接到redux状态的组件中，这样只要您所需的状态部分在商店中更新，它就会更新

const mapStateToProps = (state, ownProps) {
  const { isAuthenticated } = state.authentication // Get whatever you need from the reducer that handles authentication state
  return { isAuthenticated } 
}

class MyAppBar extends Component {
  ...

  render(){
    return(<AppBar iconElementRight={this.props.isAuthenticated ? <Menu /> : null} {rest of your props})
  }
}

export default connect(mapStateToProps)(MyAppBar)

这样，组件将跟踪与身份验证减少器相关的商店上的任何更改，并将触发呈现方法（在需要时执行检查）

在React中重新渲染AppBar组件

1 个答案: