当状态是对象的对象时组件重新渲染答案

【问题标题】：Component re-render when state is an object of objects当状态是对象的对象时组件重新渲染
【发布时间】：2019-01-29 07:34:40
【问题描述】：

我在一页上有多个 redux 表单。在渲染组件时，我能够使用form 属性创建不同的表单。

<ItemDetail form={itemName} />

但我正在使用 redux 存储来维护我的组件的状态。我正在以某种方式动态创建 redux 商店：

const currentState = { ...state };
currentState[action.itemName].itemHash = 'fetching';
currentState[action.itemName].itemType = '';
return currentState;

问题是当我更新这个对象的任何属性时，组件不会重新渲染。

如果我这样做：

const currentState = { ...state };
currentState[action.itemName]={};
currentState[action.itemName].itemHash = 'fetched';

它正确地重新渲染组件。但如果我只是这样做：

const currentState = { ...state };
currentState[action.itemName].itemHash = 'fetching';

它不会重新渲染它。

虽然有一种解决方法可以深度克隆项目对象或上面显示的相同方式。但不确定这是否是一种好方法，或者我们是否可以以更清洁的方式进行。

感谢任何帮助！

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

您的组件不会重新渲染，因为 React 会对状态进行浅层比较。它通过迭代正在比较的状态的键并在每个对象中的键的值不严格相等时返回 true 来做到这一点。

在您的情况下，您需要为您的 currentState[action.itemName] 属性创建一个新对象：

    const currentState = { ...state };

    currentState[action.itemName] = {
      ...currentState[action.itemName],
      itemHash = 'fetching',
      itemType = '';
    };

    return currentState;

【讨论】：