如何在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
}));

希望它能帮助