componentWillReceiveProps 不会在路由器参数更改时触发

Question

我正在使用 react-router-redux 以及 redux、react-router 和 react，并且在这个 repo 中一切都运行良好：

https://github.com/justsayno/redux-react-introduction-code/tree/issue-branch

（查看分支 issue-branch 以重现我的问题）

我已经使用 react-router-redux 将 react-router 状态集成到我的 redux 状态中，并且可以成功地使用 mapStateToProps 获取路由器参数 employeeId 我需要像这样的道具：

(以下内容来自this file)

const mapStateToProps = (state, ownProps) => ({ 
    employeeId : ownProps.params.employeeId,
    employee: state.selectedEmployee.item,
    hasLoaded: state.selectedEmployee.hasLoaded,
    hasError: state.selectedEmployee.hasError,
    error: state.selectedEmployee.error
})

在我的渲染函数中，我可以 console.log(employeeId 是 ${this.props.employeeId})，它随着我路由到该组件和参数的变化而变化。

但是由于我不明白的原因，当参数改变时它不会触发。

componentWillReceiveProps(nextProps){
    console.log(nextProps)
}

我想要实现的是一个不同的模拟 API 调用员工列表与单个员工，我需要在 employeeId 参数更改时重新检索员工，否则我只能看到一个的员工。我打算在我的 componentWillReceiveProps 函数中执行此操作，检查 employeeId 是否有更改并启动一个操作，如果它像这样：

componentWillReceiveProps(nextProps){
    const { employeeId, selectEmployee } = this.props
    if(nextProps.employeeId !== employeeId){
        selectEmployee(nextProps.employeeId)
    }
}

我是不是处理错了？

Answer 1

componentWillReceiveProps 仅在 props 改变时触发。在您的情况下，您设置了 employeeId 的初始道具并且不会改变。您可以在 componentWillMount.

到达 employeeId

你的 selectEmployee call 的问题是它没有发送 employeeSelected，因为 hasLoaded 在 EMPLOYEE_RECEIVED 操作中被设置为 true 一次之后永远不会改变，所以 selectEmployee returns 在调度 employeeSelected 之前，假设在 EMPLOYEE_SELECTED.

中将 hasLoaded 改回 false

componentWillReceiveProps 不会在路由器参数更改时触发

componentWillReceiveProps not firing on router param change

reactjs

redux

redux-router