使用 ImmerJS 在父级（按 id）中更新子级（按 id）

Question

如何使用 immerJS

更新 child12 的 content

const [fields, setFields] = useState([
    {
        name: "Parent 1",
        id: "parent1",
        children: [
            {id:"child11", content=""},
            {id:"child12", content=""}
        ],
    },
    {
        name: "Parent 2",
        id: "parent2",
        children: [
            {id:"child21", content=""},
            {id:"child22", content=""}
        ],
    },
]);

我已经能够使用以下方法更改 parent name：

    setFields(
        produce((draft) => {
            const field = draft.find((field) => field.id === "parent1");
            field[name] = "new parent1";
        })
    );

我如何更深入，在 children 中找到 id 的子项并更改其 content 值？

Answer 1

事实证明这非常简单：只需改变数据即可。

setFields(
    produce((draft) => {
        const child = draft.find((field) => field.id === "parent1").children.find((child)=>child.id==="child21");
        child[content] = "new value";
    })
);

使用 ImmerJS 在父级（按 id）中更新子级（按 id）

Using ImmerJS to update child (by id) within a parent (by id)

javascript

arrays

reactjs

immer.js