如何在 React useState 中存储和更新多个值？ 如果其中一个值在数组中？

Question

我使用单个 useState Hook 在 React 组件中收集了一系列用户数据元素。

 const [allValues, setAllValues] = useState<IProduct>({
    title: '',
    name: '',
    category: '',
    price: 0,
    image: '',
    size: [],
    color: [],
    inStock: true,
  });

我们可以看到其中两个是数组。

 const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setAllValues({ ...allValues, [e.target.name]: e.target.value });
    console.log(allValues);
  };

和输入框是这样的......我应该做些什么改变？

 <input
        type='text'
        className='form-control'
        id='name'
        name='name'
        placeholder='Enter a Name'
        onChange={changeHandler}
        />

Answer 1

setAllValues({
 ...allValues,
 toUpdate: newValue
});

不同于

setAllValues(prev => ({
 ...prev, 
  toUpdate: newValue
}));

希望能帮助到你