在反应本机挂钩中更新嵌套数据状态答案

【问题标题】：Update nested data state in react native hooks在反应本机挂钩中更新嵌套数据状态
【发布时间】：2021-08-12 12:36:51
【问题描述】：

我确实有一个处于 react native 状态的数据集。我想更新一些嵌套数据并将一些数据附加到对象键列表中。例如：

const [data, setData] = useState({
    set1: {current_page: 1, last_page: 2, data: [data1, data2, data3, data4]},
    set2: {
      current_page: 1,
      last_page: 4,
      data: [data11, data22, data33, data44],
    },
    set3: {
      current_page: 1,
      last_page: 5,
      data: [data12, data22, data32, data42],
    },
    set4: {
      current_page: 1,
      last_page: 2,
      data: [data11, data21, data31, data41],
    },
  });

这是我的示例数据类型。稍后我只想从状态中更新单个数据键值对，例如 set2 键，我想设置 current_page = 3 和 last_page =5 并将其他几个数据附加到另一个列表数据的数据字段中。我不想影响该州的任何其他数据。我想更新到：

let dataToAppend = [data55, data66, data77];
  const [data, setData] = useState({
    set1: {
      current_page: 1,
      last_page: 2,
      data: [data1, data2, data3, data4],
    },
    set2: {
      current_page: 3,
      last_page: 5,
      data: [data11, data22, data33, data44, data55, data66, data77],
    },
    set3: {
      current_page: 1,
      last_page: 5,
      data: [data12, data22, data32, data42],
    },
    set4: {
      current_page: 1,
      last_page: 2,
      data: [data11, data21, data31, data41],
    },
  });

【问题讨论】：

标签： javascript reactjs react-native react-hooks use-state

【解决方案1】：

你可以使用Spread operator:

setData({ ...data, set2: {...set2, current_page: 3, last_page: 5, data: [...set2.data, ...newItems]} })

【讨论】：

我可能会通过这个更新 current_page 和 last_page 但是如何将数据追加/推送到 set2 对象内的数据列表？
同理，使用spread op，查看更新后的答案
是否可以在上面的答案中插入动态字段名称而不是 set2。例如，如果我存储 let tabName='set2';我可以替换为 setData({ ...data, tabName: {...tabName, current_page: 3, last_page: 5, data: [...set2.data, ...newItems]} })
是的，您可以使用方括号使用动态名称：...[setName]: {...}

【解决方案2】：

您始终可以将data 复制到一个局部变量中，修改您需要的属性并将data 设置为新值。比如：

let result = Object.assign({}, data); //<-- deep copy of data
result.set2.current_page = 17;
result.set2.last_page = 23;
result.set2.data.push(data43);
setData(result);

【讨论】：