React componentDidUpdate 没有收到最新的道具 [英] React componentDidUpdate not receiving latest props

问题描述

在 Redux 中，我在 redux-thunk 动作创建器中运行以下内容:

In Redux, I'm running the following in a redux-thunk action creator:

dispatch({type: "CASCADING_PROMPT_STATUS", promptName, list: 'model', status: 'disabled'});
dispatch({type: "CASCADING_PROMPT_STATUS", promptName, list: 'model', status: 'enabled'});

这会触发 reducer 两次，我可以在控制台中看到 Redux 状态从禁用 -> 启用.

This triggers the reducer twice, and I can see in the console that Redux state changes from disabled -> enabled.

在 React 中，我有以下组件，这些组件具有连接到 CASCADING_PROMPT_STATUS 更新状态的道具.

In React, I have the following component which has props connected to state of which CASCADING_PROMPT_STATUS updates.

但是，在我的组件中，我正在运行检查以查看 componentDidUpdate(prevProps)

However, in my component, I'm running a check to see if state changed in componentDidUpdate(prevProps)

这不会触发.

如果我改变动作创建者来延迟第二次调度 setTimeout(<dispatch...>, 1); 甚至一毫秒，prevProps !== this.props，这是我所期待的.

If I change the action creator to delay the second dispatch setTimeout(<dispatch...>, 1); even by one millisecond, prevProps !== this.props, which is what I expect.

我的组件像这样连接到 redux:

My component is connected to redux like so:

const C_Component = connect(mapStateToProps, mapDispatchToProps, null, {pure: false})(Component);

React 是否批量处理 prop 更改?为什么我必须延迟第二次派遣?我认为 redux dispatch 是同步的.

Does React batch up prop changes? Why do I have to delay the second dispatch? I thought redux dispatch were synchronous.

我更新 redux 状态的方式如下:

The way I'm updating the redux state is as follows:

var newState = {};

if (!_.isUndefined(state)){
    newState = _.cloneDeep(state);
}
...
    case "CASCADING_PROMPT_STATUS":
        newState[action.promptName][action.list].disable = action.status === 'disabled';
        break;

推荐答案

Redux 调度是同步的(除非中间件拦截并延迟操作).但是，在大多数情况下，React 更新是批量更新的.

Redux dispatches are synchronous (unless a middleware intercepts and delays the action). However, React updates are batched in most cases.

第二，你的reducer肯定会改变状态，因为你没有复制每一级需要更新的嵌套.这些突变会导致您的连接组件认为没有任何变化，并跳过更新.有关更多信息，请参阅文档的 Structureing Reducers - Immutable Update Patterns 部分有关如何正确执行不可变更新的详细信息.

Second, your reducer is definitely mutating the state, because you're not copying every level of nesting that needs to be updated. The mutations will cause your connected component to think nothing has changed, and skip updating. See the Structuring Reducers - Immutable Update Patterns section of the docs for more details on how to properly do immutable updates.

实际上……重新阅读您的减速器，您正在进行深度克隆，因此理论上这不会发生变异.但是，根据 Redux 常见问题解答，深度克隆是个坏主意.相反，您应该进行嵌套浅更新.

Actually... re-reading your reducer, you are doing a deep clone, so in theory that's not mutating. However, per the Redux FAQ, deep cloning is a bad idea. Instead, you should do nested shallow updates.

第三，你的 shouldComponentUpdate 不应该比较 this.props 和 nextProps 本身.实际的道具对象本身肯定会有所不同.相反，它应该比较那些对象的内容——即，props.a !== nextProps.a &&props.b !== nextProps.b 等等.这被称为浅等式比较".

Third, your shouldComponentUpdate shouldn't compare this.props vs nextProps themselves. The actual props objects themselves will definitely be different. Instead, it should compare the contents of those objects - ie, props.a !== nextProps.a && props.b !== nextProps.b, etc. This is known as a "shallow equality comparison".

这篇关于React componentDidUpdate 没有收到最新的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！