React JS中如何根据另一对象的路径数组修改对象属性？

嘿，我完全懂你现在的困扰——WebSocket接收到带路径的更新对象，要用来修改React里的状态对象对吧？关键得遵守React的不可变性原则，直接改原对象不会触发组件重渲染，所以咱们得创建新的对象副本才行。

我给你一步步拆解解决方法：

1. 核心思路：写个通用的深层路径更新工具函数 #

首先需要一个复用性强的工具函数，根据给定的路径数组，在原对象基础上创建新对象并更新对应值。不管路径长度多少，都能靠它搞定。

// 保证不可变性的深层对象更新工具函数
const updateObjectByPath = (obj, path, value) => {
  // 先拷贝原对象的第一层
  const newObj = { ...obj };
  let currentLayer = newObj;

  // 遍历路径数组，除了最后一个节点
  for (let i = 0; i < path.length - 1; i++) {
    const key = path[i];
    // 如果当前层级没有这个节点，或者不是对象/数组，就创建空对象（可根据业务改成数组）
    if (!currentLayer[key] || typeof currentLayer[key] !== 'object') {
      currentLayer[key] = {};
    }
    // 拷贝当前层级的节点，避免修改原对象
    currentLayer[key] = { ...currentLayer[key] };
    // 移动到下一层级
    currentLayer = currentLayer[key];
  }

  // 更新最后一个路径节点的值
  const finalKey = path[path.length - 1];
  currentLayer[finalKey] = value;

  return newObj;
};

2. 在React组件里结合状态使用 #

假设你的objectWeAreEditing是用useState管理的状态，结合WebSocket更新可以这么写：

import { useState } from 'react';

function YourComponent() {
  // 初始化状态对象
  const [objectWeAreEditing, setObjectWeAreEditing] = useState({
    property1: '初始值1',
    property2: '初始值2',
    playerStatuses: {
      id1: [false, '旧状态'],
      id2: [true, '正常状态']
    }
  });

  // 处理WebSocket接收的更新数据
  const handleWebSocketUpdate = (updateData) => {
    const { path, value } = updateData;
    // 调用工具函数生成新对象
    const updatedObject = updateObjectByPath(objectWeAreEditing, path, value);
    // 更新React状态
    setObjectWeAreEditing(updatedObject);
  };

  // 模拟WebSocket推送消息（实际项目里替换成真实的WebSocket回调）
  const simulateWebSocketMessage = () => {
    const mockUpdate = {
      path: ["playerStatuses", "id1"],
      value: [true, "Random"]
    };
    handleWebSocketUpdate(mockUpdate);
  };

  return (
    <div>
      <button onClick={simulateWebSocketMessage}>模拟WebSocket更新</button>
      <pre>{JSON.stringify(objectWeAreEditing, null, 2)}</pre>
    </div>
  );
}

export default YourComponent;

3. 边界情况调整 #

如果你的路径里可能包含数组索引，或者不需要自动创建不存在的路径节点，可以调整工具函数：

• 比如判断当前节点类型，对应创建空数组或空对象
• 如果遇到不存在的节点想抛出提示，或者跳过更新，也可以在循环里加判断逻辑，完全看你的业务需求

为啥要这么做？ #

React靠状态的引用变化触发重渲染，直接修改原对象的话，对象引用没变，React会认为状态没更新，组件就不会重新渲染。所以必须通过创建新对象的方式保证不可变性。

内容的提问来源于stack exchange，提问作者FlamePrinz