Reactjs react-redux/react路由器：如何更改链路上的状态

在A页上，我有一个react路由器

，它通向B页。在B页上，我有一个按钮，它尝试在服务器上做一些事情，要么通向C页（成功），要么留在B页（失败）。在最后一种情况下，页面上会显示一条消息以显示错误

当我在B页上看到错误消息时，如果我使用浏览器返回按钮返回A页，然后再次单击

进入B页，消息仍在这里

因此，在使用

时，状态似乎没有重置，我想知道在

上更改状态的好方法是什么

---

编辑： 为了更清楚，在A页，您有一个

到B页。在B页，您有一个按钮来提交您的登录信息（登录和密码）

单击时，一个操作将向服务器发出请求：

function authRequest() {
  return {
    type: actionTypes.AUTH_REQUEST
  };
}

function authReceive(authToken) {
  return {
    type: actionTypes.AUTH_RECEIVE,
    authToken
  };
}

function authError(errors) {
  return {
    type: actionTypes.AUTH_ERROR,
    errors
  };
}

export function fetchLogin(email, password) {
  return function (dispatch) {
    dispatch(authRequest());
    const urlApi = `//${AUTH_BACKEND_HOST}:${AUTH_BACKEND_PORT}/${AUTH_BACKEND_URL.login}`
    fetch(urlApi, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        email,
        password
      })
    })
    .then((response) => {
      if(response.ok) {
        response.json().then(function(json) {
          dispatch(authReceive(json.key));
          dispatch(push('/'));
        });
      } else {
        response.json().then(function(json) {
          dispatch(authError(JSON.stringify(json)));
        });
      }
    })
    .catch(function(ex) {
      console.log(ex);
    });
  };
}

。。。如果失败，减速机将在以下状态中添加错误消息：

const initialState = {
  authToken: '',
  isFetching: false,
  errors: ''
}

export default function (state=initialState, action) {
  switch (action.type) {
    case actionType.AUTH_REQUEST:
      return {
        ...state,
        isFetching: true,
        errors: ''
      };
    case actionType.AUTH_RECEIVE:
      return authLogin(state, action);
    case actionType.AUTH_ERROR:
      return {
        ...state,
        errors: (JSON.parse(action.errors))
      };
  }
  return state;
}

function authLogin(state, action) {
  const { authToken } = action;
  return {
    ...state,
    isFetching: false,
    errors: '',
    authToken
  };
}

render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>Email <input ref="email" /></label>
        <label>Password <input ref="password" type="password" /></label><br />
        <p className="error">{this.props.errors.non_field_errors}</p>
        <button type="submit">Login</button>
      </form>
    )
  }

。。。最后，演示者有一个带有

的渲染方法，如果处于以下状态，则显示错误：

const initialState = {
  authToken: '',
  isFetching: false,
  errors: ''
}

export default function (state=initialState, action) {
  switch (action.type) {
    case actionType.AUTH_REQUEST:
      return {
        ...state,
        isFetching: true,
        errors: ''
      };
    case actionType.AUTH_RECEIVE:
      return authLogin(state, action);
    case actionType.AUTH_ERROR:
      return {
        ...state,
        errors: (JSON.parse(action.errors))
      };
  }
  return state;
}

function authLogin(state, action) {
  const { authToken } = action;
  return {
    ...state,
    isFetching: false,
    errors: '',
    authToken
  };
}

render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>Email <input ref="email" /></label>
        <label>Password <input ref="password" type="password" /></label><br />
        <p className="error">{this.props.errors.non_field_errors}</p>
        <button type="submit">Login</button>
      </form>
    )
  }

render（）{
返回(
电子邮件
密码

{this.props.errors.non_field_errors}
登录
)
}

正如我所说，如果它显示错误，那么我再次回到A页，然后在B页单击链接，消息仍然存在

---

谢谢。

Redux就是要始终如一、干净地跟踪应用程序的状态，而不依赖于使用该状态的组件。因此，故障状态保持不变并不奇怪，除非您特别清除它

因此，下一个问题是，在什么情况下，您希望清除故障状态？（在什么情况下，您希望忘记页面B的操作失败的事实？）

从a到B跟随a

时？你可以这样做，但它似乎过于具体。（如果用户以其他方式到达B怎么办？为什么A的链接必须关心B的故障状态？）

B什么时候上马？（换句话说，“每次我输入B时，都将其视为一张白板。”）要实现这一点，请使用

B什么时候卸载？（换句话说，“每次我离开B时，丢弃B内任何操作的状态”）要实现此功能，请使用

---

我猜选项2或3最适合您的设计。因此，您可以从

componentWillMount

或

componentWillUnmount

调度适当的操作，该操作的还原程序将清除任何故障状态。

如果未重置状态，则表示未调用

ComponentB

的

componentWillMount

。包括您的路线配置，它将提供更好的想法您是对的，在我正在使用的这个应用程序中没有组件之类的功能。我在一些示例中看到了它们，但是没有一个在这个应用中使用，我仍然可以注册一个用户，然后在主页上连接和导航。谢谢，我会尝试一下，我看到了一些功能，比如componentSomething，但我没有使用它。所以，是的，我希望B在每次我使用它的时候都是空白的。关于（3），我认为我们不需要在卸载时显式地清除状态，react会这样做us@Deadfish-我应该得到术语的确认。如果说“状态”，他指的是保存在Redux存储中的应用程序状态（这是我的假设），那么它的寿命与Redux存储一样长（可能是整个应用程序）。如果他指的是页面B的React组件状态，那么你是对的，它在页面B的组件卸载时被清除（并且在页面B组件装载时也被初始化，所以我认为这不会导致他的问题）。@JoshKelley是的，我指的是存储状态，而不是组件状态。我想。。。我编辑了我的问题。