Question

所以在更新组件上的状态时遇到问题。 this.state.authenticated传递给Navigation以隐藏/显示登录/注销按钮。但是，一旦用户登录状态，则更改不会重新导航导航。我必须手动刷新页面以查看导航栏重新呈现并显示注销按钮。

这是代码

const token = window.localStorage.getItem("token");

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authenticated: false,
    }
  }
  componentWillMount() {
    console.log('app token:', token);
    if (token) {
      this.setState({ authenticated: true});
    } else {
      this.setState({authenticated: false});
    }
    console.log('app componet will mount:', this.state.authenticated);
  }
  render() {
    return (
      <div className="App">
        <Navigation authenticated={this.state.authenticated}/>
        <Route path='/' exact component={Register} />
        <Route path='/feed' exact component={Feed} />
        <Route path='/login' component={Login} />
        <Route path='/feed/:id'  component={SingleGroup} />
        <Route path='/mygroups'  component={MyGroups} />
      </div>
    );
  }
}

登录操作代码

export const login = (username, password, history) => {
  axios.defaults.withCredentials = true;
  return (dispatch) => {
    axios.post(`${url}/user/login`, {username, password})
      .then((data) => {
        dispatch({
          type: 'SIGNIN_USER',
          payload: data,
        })
        window.localStorage.setItem('token', data.data.token);
        history.push('/feed');
      })
      .catch((err) => {
        dispatch({
          type: 'SIGNIN_ERROR',
          payload: err,
        });
      });
  };
};

Answer 1

状态经过身份验证的仅在 componentWillMount 时设置一次。您的应用组件未连接到redux商店，因此应用不会在商店数据更改时重新呈现。此时 state.authenticated 直到 false 所有数据都应来自redux store（非组件状态）解决：
- 将应用连接到redux商店或将导航连接到redux商店。
- 在功能 mapStateToProps 中，获取＆＃34; 经过身份验证＆＃34;值并将其返回到组件道具;
- 基于 this.props.authenticated 值渲染导航。

Redux Connect Tutorial

React组件不会在状态更改时重新呈现

1 个答案: