动态改变嵌套数组的值答案

【问题标题】：Change Value of Nested Array Dynamically动态改变嵌套数组的值
【发布时间】：2021-07-02 11:53:31
【问题描述】：

我正在尝试动态更改我在 redux 中的嵌套状态。 “更改”或“data.payload.peferenceType”是我要更改的值。例如，它可以发出hud.vehicle.minimap。我尝试做的第一件事是newState[change] = data.payload.value。但它确实有效。忽略电话和声音。稍后我将在那里添加值。任何帮助将不胜感激，谢谢！

const initialState = {
  hud: {
    hud_saves: {
      current_hud: 1,
    },
    vehicle: {
      minimap: true,
      speedometer_fps: 15,
    },
    compass: {
      showCompass: true,
      showDirections: true,
      compass_fps: 15,
    },
    status: {
      health: { display: true, hide: 75 },
      armor: { display: true, hide: 75 },
      hunger: { display: true, hide: 75 },
      thirst: { display: true, hide: 75 },
    },
  },
  phone: {},
  voice: {},
};

const PreferencesStore = (state = initialState, data: IShow) => {
  switch (data.type) {
    case "setPreference":
      var newState = { ...state };
      var change = data.payload.peferenceType;

      return newState;
    default:
      return state;
  }
};

【问题讨论】：

检查我的答案。这是你要找的吗？

标签： reactjs typescript react-redux

【解决方案1】：

您需要根据. 字符拆分键，然后在初始状态对象内循环以找到路径。

关键部分是循环并离开最后一个元素，以便在循环外更新其值。

i < split.length - 1; 而不是i <= split.length - 1;

const initialState = {
  hud: {
    hud_saves: {
      current_hud: 1
    },
    vehicle: {
      minimap: true,
      speedometer_fps: 15
    },
    compass: {
      showCompass: true,
      showDirections: true,
      compass_fps: 15
    },
    status: {
      health: { display: true, hide: 75 },
      armor: { display: true, hide: 75 },
      hunger: { display: true, hide: 75 },
      thirst: { display: true, hide: 75 }
    }
  },
  phone: {},
  voice: {}
};

function alterValue(obj, str) {
  let split = str.split(".");
  let obj2 = null;

  for (let i = 0; i < split.length - 1; i++) {
    if (obj2 == null) {
      obj2 = obj[split[i]];
    } else {
      obj2 = obj2[split[i]];
    }
  }

  obj2[split[split.length - 1]] = "11111111111";

  console.log("INITIAL STATE VS FINAL STATE", initialState, newState);
}
let newState = JSON.parse(JSON.stringify(initialState));
alterValue(newState, "hud.vehicle.minimap");

【讨论】：

【解决方案2】：

如果它是嵌套的，你可以在这里使用扩展运算符，例如你想从vehicle 更新minimap

return {
    ...state,
    hud: {
        ...state.hud,
        vehicle : {
            ...state.hud.vehicle
            minimap : data.payload.peferenceType
        }
    },
};

【讨论】：