在本机挂钩中更新嵌套数据状态

Question

我确实有一个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],
    },
  });

Answer 1

您可以使用 Spread operator:

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

Answer 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);

在本机挂钩中更新嵌套数据状态

Update nested data state in react native hooks

javascript

reactjs

react-native

react-hooks

use-state