在保留先前状态的同时更改状态

Question

我正在使用钩子来更改状态，如下所示：

 const [fieldValues, setFieldValues] = useState([{}]); 


const handleChange = (e) => {
    e.preventDefault();
    setFieldValues( prev => ([...prev, {value : e.target.value , field: e.target.name , project : e.target.id} ]))
}

我的表单是这样的：

          <form>
                    <textarea defaultValue = {project.fieldKpi.value ? project.fieldKpi.value : null}  name={project.fieldKpi.id} id={project.projectId} onChange = {handleChange}></textarea>
                    <textarea defaultValue = {project.fieldContract ? project.fieldContract.value : null}  name={project.fieldContract.id} id={project.projectId} onChange = {handleChange}></textarea>
                    <input type="submit" value="Opslaan"/>
                </form>   

当我更改表单时，onchange触发器触发，并且出现此错误：

我想要的是一组由多个不同对象组成的数组，除非它们相同，否则不要添加新对象。

Answer 1

我认为这是 Event Pooling 的问题：

已合并SyntheticEvent。这意味着SyntheticEvent 对象将被重用，并且所有属性将在 事件回调已被调用。这是出于性能原因。如 这样，您将无法以异步方式访问事件。

解决方案：

const handleChange = (e) => {
    e.preventDefault();
    const { value , name , id } = event.target; // <---- HERE
    setFieldValues( prev => ([...prev, {value : value , field: name , project : id} ]))
}