reactjs - 使用事件属性 react setState 不工作

Question

const [product, setProduct] = useState({
  productName: "",
  quantity: 0,
  basePrice: 0,
  sellPrice: 0,
})

const handleChange = (e) => {
  let fieldName = e.target.id;
  let fieldValue = e.target.value;
  setProduct({
    fieldName: fieldValue
  });
};

上面的代码似乎不起作用。然而，当我记录 fieldName 时，它​​返回 productName。

我试图显式地使用 productName 而不是它的工作

const handleChange = (e) => {
  let fieldName = e.target.id;
  let fieldValue = e.target.value;
  setProduct({
    productName: fieldValue
  });
}

谁能告诉我为什么最初的方法不起作用？

PS 我想使用 e.target.id 的原因是因为有多个字段需要更新谢谢

Answer 1

上的二传手useState 不像 setState 那样工作 React 类组件上的方法。

仅设置一个特定的字段名称会覆盖 product 对象中其他字段的值，并将它们设置为 undefined。

您必须展开现有的 product 对象以获取其他字段的值，然后仅使用 [] 符号覆盖该字段的值动态设置字段名称。

像这样:

setProduct({ 
  ...product,
  [fieldName]: fieldValue 
});