javascript - 为深层嵌套值 react setState

Question

我的 React 状态中有一个嵌套很深的对象。目的是更改子节点的值。应该更新哪个节点的路径已经解决了，我使用辅助变量在我的 setState 中访问这个路径。

无论如何，我真的很难在这个嵌套的野兽中执行 setState。我在代码笔中抽象了这个问题: https://codesandbox.io/s/dazzling-villani-ddci9

在此示例中，我想更改具有 id def1234 的 child 的 changed 属性。

如前所述，路径是给定的:固定路径值:Members, skills 和变量路径值:Unique Key 1(来自 const currentGroupKey 以及来自 const path

的数据中的数组位置

这是我的状态对象:

constructor(props) {
  super(props);
  this.state = { 
    group:
    {
      "Unique Key 1": {
        "Members": [
          {
            "name": "Jack",
            "id": "1234",
            "skills": [
              {
                "name": "programming",
                "id": "13371234",
                "changed": "2019-08-28T19:25:46+02:00"
              },
              {
                "name": "writing",
                "id": "abc1234",
                "changed": "2019-08-28T19:25:46+02:00"
              }
            ]
          },
          {
            "name": "Black",
            "id": "5678",
            "skills": [
              {
                "name": "programming",
                "id": "14771234",
                "changed": "2019-08-28T19:25:46+02:00"
              },
              {
                "name": "writing",
                "id": "def1234",
                "changed": "2019-08-28T19:25:46+02:00"
              }
            ]
          }
        ]
      }
    }
  };
}

handleClick = () => {
  const currentGroupKey = 'Unique Key 1';
  const path = [1, 1];
  // full path: [currentGroupKey, 'Members', path[0], 'skills', path[1]]
  // result in: { name: "writing", id: "def1234", changed: "2019-08-28T19:25:46+02:00" }

  // so far my approach (not working) also its objects only should be [] for arrays
  this.setState(prevState => ({
    group: {
      ...prevState.group,
      [currentGroupKey]: {
        ...prevState.group[currentGroupKey],
        Members: {
          ...prevState.group[currentGroupKey].Members,
          [path[0]]: {
            ...prevState.group[currentGroupKey].Members[path[0]],
            skills: {
              ...prevState.group[currentGroupKey].Members[path[0]].skills,
              [path[1]]: {
                ...prevState.group[currentGroupKey].Members[path[0]].skills[
                  path[1]
                ],
                changed: 'just now',
              },
            },
          },
        },
      },
    },
  }));
};

render() {
  return (
    <div>
      <p>{this.state.group}</p>
      <button onClick={this.handleClick}>Change Time</button>
    </div>
  );
}

如果有任何帮助，我将不胜感激。我已经挣扎了 2 天了:/

Answer 1

在使用新的依赖项并必须学习它们之前，您可以编写一个辅助函数来处理更新深层嵌套的值。

我使用以下助手:

//helper to safely get properties
// get({hi},['hi','doesNotExist'],defaultValue)
const get = (object, path, defaultValue) => {
  const recur = (object, path) => {
    if (object === undefined) {
      return defaultValue;
    }
    if (path.length === 0) {
      return object;
    }
    return recur(object[path[0]], path.slice(1));
  };
  return recur(object, path);
};
//returns new state passing get(state,statePath) to modifier
const reduceStatePath = (
  state,
  statePath,
  modifier
) => {
  const recur = (result, path) => {
    const key = path[0];
    if (path.length === 0) {
      return modifier(get(state, statePath));
    }
    return Array.isArray(result)
      ? result.map((item, index) =>
          index === Number(key)
            ? recur(item, path.slice(1))
            : item
        )
      : {
          ...result,
          [key]: recur(result[key], path.slice(1)),
        };
  };
  const newState = recur(state, statePath);
  return get(state, statePath) === get(newState, statePath)
    ? state
    : newState;
};

//use example
const state = {
  one: [
    { two: 22 },
    {
      three: {
        four: 22,
      },
    },
  ],
};
const newState = reduceStatePath(
  state,
  //pass state.one[1],three.four to modifier function
  ['one', 1, 'three', 'four'],
  //gets state.one[1].three.four and sets it in the
  //new state with the return value
  i => i + 1 // add one to state.one[0].three.four
);
console.log('new state', newState.one[1].three.four);
console.log('old state', state.one[1].three.four);
console.log(
  'other keys are same:',
  state.one[0] === newState.one[0]
);