在状态中查找对象并更新属性

Question

我设置的动态状态有问题。我的第一个状态是这样的：

const [exercises, setExercises] = useState([{
  id: 123,
  title: "Title here",
  category: "someCategory"
}])

然后用户选择了此状态的项目。我创建了表示所选对象的第二个状态，但向其添加了其他属性。例如，我正在添加和初始化属性 'amount' 和 'unit'.

const [selectedExercises, setSelectedExercises] = useState([{
  id: 123,
  title: "Title here",
  category: "someCategory",
  amount: 0,
  unit: ''
}])

我希望用户从表格中选择数量和单位。我如何访问和更改状态中的这两个属性？由于不知道用户的选择，只好先找到状态内的对象

我已经尝试过（el 从某处的输入元素调用）：

setSelectedExercises([
  ...selectedExercises,
  (selectedExercises.find(exercise => exercise.title === el.title).amount = 1),
  ])

如何找到有问题的对象并更新其数量属性（例如在 onChange 方法中）？

Answer 1

const [selectedExercises, setSelectedExercises] = useState([{
  id: 123,
  title: "Title here",
  category: "someCategory",
  amount: 0,
  unit: ''
}]);

// Your handler should look like this and 
// you should call handleAmountChange(el.id, 1)

function handleAmountChange(amount, id) {
  setSelectedExercises(prev => prev.map(selectedExercise => {
    if (selectedExercise.id === id) {
      return {
        ...selectedExercise,
        amount
      }
    }

    return selectedExercise;
  }));
}

更改任何属性的更通用的函数如下所示。

function handleChange(id, property, value) {
  setSelectedExercises(prev => prev.map(selectedExercise => {
    if (selectedExercise.id === id) {
      return {
        ...selectedExercise,
        [property]: value
      }
    }

    return selectedExercise;
  }));
}

在状态中查找对象并更新属性

Find object in state and update property

state

onchange

reactjs

在状态中查找对象并更新 属性

Find object in state and update property

state

onchange

reactjs

在状态中查找对象并更新属性