如何更新数组字段之一？

Question

我有一个这样的数组：

a=[{id:1 , operand:2 ,children:[{a:1]{b:2}]

当我想添加一个新字段时，我会这样做：

   const [items, setItems] = useState(a);
    
      const gettableData = (value) => {
        let operanList = items;
  let repeatListError = tableData.filter((i) => i.operandId === value.operandId);
    if (!repeatListError.length > 0) operanList.push(value);
        setTableData(operanList);
      };

每次单击按钮时都会调用此方法。 我想在添加新的 object 时检查操作数，如果只有更新 children.like：

value=[{id:1 , operand:2 ,children:[{a:1]{b:2}{c:3}{d:4}]

Answer 1

首先重新格式化值，如下所示。您的语法不正确：

  const value=[{id:1 , operand:2 ,children:{a:1,b:2,c:3,d:4}}]

这就是如何更改数组中对象内的子对象的方法：

  const list = [
    { id: 1, operand: 2, children: { a: 1, b: 2, c: 3, d: 4 } },
    { id: 2, operand: 3, children: { a: 1, b: 2, c: 3, d: 4 } },
  ];

  let newList = [...list];
  let updatedChildren = { ...newList[1].children, e: 5, f: 6 };
  let updatedItem = { ...newList[1], children: updatedChildren };
  newList.splice(1, 1, updatedItem);

  console.log(newList);

  setState(newList);

您创建数组的新实例。 更新所需项目的 children 属性（在本例中我选择 1 ）。 然后更新数组中的整个 object（它包含 id & 操作数和子项）。 最后通过用新项目替换原始项目来改变 newList。 在拼接方法中，请记住第二个数字必须始终为一个，因为它将删除一个项目，给出的第一个数字应该是需要更改的项目的索引（在本例中我们选择了一个）。 然后您可以根据需要继续设置 state，因为您有一个新的更新列表。

Answer 2

我发现您的代码中使用的变量名称有些不一致，例如tableData在哪里？ 是属于 state 的items吗？

我不明白 children 是一个对象数组还是一个带有键值对的 object。

无论如何，正如我在评论中提到的，实现此目的的最简单方法是使用 map。将其视为通用实现并尝试在您的代码中使用它。

const a=[{id:1 , operand:2 ,children:[{a:1]{b:2}] // What is the data stucture of children? Is it array of objects or just object?

const [items, setItems] = useState(a);
const gettableData = (value) => {
  
  // creating a copy is not required as map will return a new array.
  // map => filter + modify, so use map
  
  let updatedList = tableData.map((i) => {
    if (i.operandId === value.operandId) {
      // match found, so update children
      return {
         ...i,                  // first, copy everything from i
         children: [            // then update children, and since children is an array of objects
           ...i.children,       // first copy every key of i's children
           ...value.children    // then copy value's children
         ]
      }
    }
    return i;     // no match? return i as it is.
  });

  setItems(updatedItems)

Answer 3

您必须将数组放在另一个变量中并告诉它如果它有孩子，它将在孩子字段中记住它并为其设置一个新值。