Question

这是我的嵌套对象。

const [mileStones, setMileStones] = useState({
    milestone1: [
      {
        checked: true,
        name: 'Preapre the fitting',
        prepareFittingMileStones: [
          { mileStone: 'Solid wood for frame/support', checked: true },
          { mileStone: 'Plywood for frame/support', checked: false },
          { mileStone: 'Plywood for panels', checked: true },
          { mileStone: 'Plywood for partition', checked: true },
          { mileStone: 'Fixing supports', checked: true },
          { mileStone: 'Fixing panels', checked: false },
          { mileStone: 'Check with level scale and plumb', checked: true },
          { mileStone: 'Cutting the Veneer as per size', checked: false },
          { mileStone: 'Fixing of veneer on the panels', checked: false },
        ]
      }
    ]
  })

在平面列表中呈现多个复选框。我想要这样的东西，但是它不起作用！

<CheckBox value={item.checked} style={{ alignSelf: 'center' }}
  onPress={() => {
    mileStones.milestone1.prepareFittingMileStones.checked = !mileStones.milestone1.prepareFittingMileStones.checked
    setMileStones({ mileStones })
  }}
/>

我想在按下时切换复选框的值并保存状态。

Answer 1

您可以使用mileStone1属性创建新对象。然后使用新的里程碑对象设置状态。

<CheckBox value={item.checked} style={{ alignSelf: 'center' }}
  onPress={() => {
      let newMileStone = { ...mileStones }
      newMileStone.milestone1.prepareFittingMileStones.checked = 
             !mileStones.milestone1.prepareFittingMileStones.checked
      setMileStones({ newMileStone });
  }}
/>

如何使用useState更改嵌套对象的属性的值？

1 个答案: