Question

我正在尝试使用通用函数更新状态的特定于属性的属性，该函数将当前状态，属性名称和属性新值作为参数，并返回具有该属性的更新值的状态。但是我的react组件没有使用更新后的值重新渲染。我在这里到底在做什么错？

在我检查了新状态对象的chrome更新工具后，它具有更新的值，但是我的react组件渲染功能没有再次被调用

以下是我的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

我会采用这样的方法，它将涵盖所有基础（未经测试）。

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

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

Answer 2

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

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;
}

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

2 个答案: