React Hooks 更新嵌套数组

Question

我在使用 useState 挂钩的状态中有一个名为选项的对象数组我只想更新特定索引处的嵌套数组对象。var subOptionModel = {        text: "test",        price: 0,    };    var optionModel = {        optionSetId: 0,        optionName: "",        optionPrice: 0,        editOptionName: false,        subOptions: [subOptionModel],    };    const [options, setOptions] = useState([optionModel]);我在选项状态中有多个选项，我如何更新状态，如索引 2 处的选项和 1 处的子选项，这就是我尝试的目的。setOptions(                options.map((x, index) => {                    if (index !== optionIndex) return x;                    x.subOptions.map((subItem, subIndex) => {                        console.log(subItem);                        if (subIndex !== subOptionIndex) return subItem;                        return {                            ...subItem,                            text: text                        };                    });                }),            );

Answer 1

对于这种数据模型，我宁愿使用 useReducer 钩子。就个人而言，我觉得它更干净。

但是你的问题是，你没有改变并返回你的 subOptions 。

setOptions(

  options.map((x, index) => {

      if (index !== optionIndex) return x;

      x.subOptions = x.subOptions.map((subItem, subIndex) => {

          console.log(subItem);

          if (subIndex !== subOptionIndex) return subItem;

          return {

              ...subItem,

              text: text

          };

      });

      return x;

  }),

);

Answer 2

我建议您使用不变性库，例如immer.js。这将允许您精确地选择要在您的州内更新的内容。

这将允许您像这样修改您的选项：

import produce from "immer"

const newOptions = produce(options, draftOptions => {

    draftOptions[2].subOption[1] = [whatever you want]

})

setOptions(newOptions)

Answer 3

按照您的解决方案，您错过了第一个返回mapif index === optionIndex。

setOptions((options) => {

  return options.map((x, index) => {

    if (index !== optionIndex) return x;

    return {

      ...x,

      subOptions: x.subOptions.map((subItem, subIndex) => {

        if (subIndex !== subOptionIndex) return subItem;

        return {

          ...subItem,

          text: text

        };

      })

    }

  })

})

否则你可以使用类似immer.js