Question

我正在通过我的＆＃34; Root＆＃34;我的反应路线，＆＃34; Home＆＃34;。

当＆＃34;状态＆＃34;我的应用程序的（state.loggedIn）发生了变化，＆＃34; Home＆＃34;更新（外观按预期更改）但是＆＃34; shouldComponentUpdate＆＃34;不被称为。

我想使用＆＃34; shouldComponentUpdate＆＃34;检测一个属性（＆＃34; loggedIn＆＃34;）是否在Root中发生了变化，并做了一些额外的工作。

// Root.js
import {Provider} from 'react-redux';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch} from 'react-router-dom';

...

render() {
  const store = this.props.store;
  const loggedIn = this.state.loggedIn;
  const handleLogin = this.handleLogin;
  const handleLogout = this.handleLogout;

  return (
    <Provider store={store}>
      <Router history={browserHistory}>
        <Switch>
          <Route exact path="/" component={
            (props) => (
              <Home
                history={props.history}
                loggedIn={loggedIn}
                handleLogout={handleLogout}/>)} />
          <Route path="/login" component={
            (props) => (
              <Login
                history={props.history}
                handleLogin={handleLogin}/>)} />
         <Route path="/workflow" component={
            loggedIn ?
            ((props) => (
              <Workflows
                history={props.history}
                match={props.match}/>)) :
            ((props) => (
              <Redirect to={
                {
                  pathname: '/',
                  state: {from: props.location},
               }
              }/>)) }/>
        </Switch>
      </Router>
    </Provider>
);

}

// Home.js
shouldComponentUpdate(nextProps, nextState) {
  console.log(nextProps);
  console.log(nextState);
  if(nextProps.loggedIn !== nextState.loggedIn) {
    if(nextState.loggedIn) {
      this.socket.connect();
    } else {
      this.socket.disconnect();
    }
  }

  return true;
}

Answer 1

看起来您的组件在每次状态更改后都要重新装入。这可以解释为什么重新绘制组件，但不调用生命周期函数shouldComponentUpdate()。如果您在componentWillMount()中粘贴日志语句，您应该会多次调用它。

应该在redux / react-router v4中更新组件

1 个答案: