终极版：点击按钮裹后如何设置的errorCode的默认状态终极版店内 标签

Question

我试图用终极版派遣来处理API的错误，通过在最后创建动作，减速机及连接（mapStateToProps）。

所以，当我输入错误的网址，我得到我的观点的错误消息。但里面包裹着我的标签按钮链接被点击，然后我的下一个视图显示了同样的错误信息，而不是上呈现新的视图。

// Actions
export const API_ERROR = "API_ERROR"
export const resetErrorCode = () => ({
  type: RESET_ERROR_CODE
})

// Reducers
import { API_ERROR, RESET_ERROR_CODE } from "actions"

const api = (state = { errorCode: null }, action) => {
  switch (action.type) {
    case API_ERROR:
      return { ...state, errorCode: action.errorCode }

    case RESET_ERROR_CODE:
      return { ...state, errorCode: action.errorCode }

    default:
      return { errorCode: null }
  }
}
export default api

// Combiner reducers
import { combineReducers } from 'redux'
import API from "./api"

export default combineReducers({
  API
});

// test.jsx
import { connect } from 'react-redux'
import API from 'api.js'
import { resetErrorCode } from 'actions'
import { Link } from 'react-router-dom'
class Test extends Component {
    componentDidMount() {
       API.call()
     }
  render() {
    switch (this.props.errorCode) {
      case 400:
      case 404:
        return (
          <div>
            Error Page
          </div>
        )
      default:
        return (
          <div>
            <Link to={{pathname: '/nextPage'}}> <button> Next Page </button> </Link>
          </div>
        )
    }
  }

   componentWillUnmount() {
     this.props.errorCode()
  }
}

const mapStateToProps = (state) => {
  return {
    errorCode: state.apiStatus.errorCode,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    errorCode: () => dispatch(resetErrorCode())
  }
}

export default connect(mapStateToProps)(Test)

// api.js
class API () {
   responseErrorHandler(statusCode) {
    console.log('responseErrorHandler() called')
    store.dispatch(notifyAPIError(statusCode))
  }
  call = () => {
     axios.get(url)
        .then(...)
        .catch((error) => this.responseErrorHandler(error.response.status))
     }
}

我监视我的终极版状态，而正确的URL Redux的状态显示{错误码：空}当我输入错误的网址Redux的状态更改为{erroCode：404}。现在，如果单击我的按钮，新视图渲染，但错误代码不改变。 Redux的状态仍然是{erroCode：404}。

我试图用componentWillUnmount改变的errorCode的状态为空，但它不工作。

有没有办法解决这个问题，我不知道componentWillUnmount我的）方式（。

我将不胜感激帮助。

Answer 1

我没有看到有关于终极版店的错误，如果你使用它里面只有一个单一的组件，并清除它卸载多大的价值：一个简单的状态会使事情在这种情况下更容易。

如果你确定你想要去的路线上，合适的时机以清除以前的错误就是当一个新的请求时，它发生在部件的安装。这意味着（）调用使得新呼叫（也就是现在的“加载”）前，应重新设置错误，并在结束时出现错误后，只有再次设定。

可能不会需要清除了卸除，因为只有其拨打电话页面需要检查，如果错误发生了，而那些将重置它安装。

最后，一些代码中的错误，你可能有：

• 确保你的减速是正确的：你通常不会改变状态的开关的“默认”，来自其他组件的任何其他行动会导致迷路的状态。
• 您正在使用的mapStateToProps和mapDispatchToProps，这是一个问题相同的道具名称。因为你不使用的连接mapDispatchToProps功能它没有失败，所以你可能要完全删除它。