如何解决使用通用函数更新状态后不重新渲染的问题

Question

我正在尝试使用一个通用函数更新我状态的属性特定属性，该函数将获取当前状态、属性名称和属性新值作为参数和 returns 状态属性的更新值。但是我的 React 组件没有使用更新后的值重新渲染。我到底做错了什么？

使用 chrome 开发者工具，当我检查了新的状态对象时它有更新的值，但是我的反应组件渲染函数没有被再次调用

以下是我在 reducer 中编写的用于更新函数的代码片段：

function App(state = initialState, action) {
  switch (action.type) {
    case ON_CHANGE:
      let newState = Utilities.updateProperty(
        state,
        action.change.key,
        action.change.value
      );
      return newState;
    case DIFFERENT_ACTION:
      // TODO implementation
      return state;
    default:
      return initialState;
  }
}

下面是Utilities.updateProperty函数中的代码：

updateProperty(object, key, value) {
    let keys = key.split(".");
    let obj = object;
    for (var i = 0; i < keys.length - 1; i++) {
      obj = obj[keys[i]];
    }
    obj[keys[keys.length - 1]] = value;
    return object;
}

当我在写 return newState; 的行添加一个断点时，我可以看到这里的值已完美更新。所以我期待我的组件将重新呈现新值。

如果我如下更改我的 return newState 它会正常工作：

return {
  ...newState,
  ...{
    now: new Date()
  }
};

Answer 1

您需要先传播您的状态，使其成为一个新对象

updateProperty(object, key, value) {
    let keys = key.split(".");
    let obj = { ...object }; // let obj = object;
    for (var i = 0; i < keys.length - 1; i++) {
      obj = obj[keys[i]];
    }
    obj[keys[keys.length - 1]] = value;
    return obj; // return object;
}

Answer 2

我会选择这样的东西，它将涵盖所有基础（未经测试）。

import produce from "immer";
import set from "lodash.set";

updateProperty(object, key, value) {
  return produce(object, draft => set(draft, key, value))
}

如何解决使用通用函数更新状态后不重新渲染的问题

How to fix not re-rendering issue after updating state using a generic function

render

reactjs

redux

react-redux