React函数组件切换输入框时对象其他属性变为undefined求助

函数组件的useState不具备类组件setState的自动合并对象属性的功能，每次调用更新方法都会直接替换整个状态值。
你当前的handlerOnChange写法直接用仅包含当前修改字段的对象覆盖了原有heldItems：

const handlerOnChange = (e, type) => {
    setHeldItems({
        [type]: e.target.value,
    });
};

比如你先输入plu的值，此时heldItems会变成{plu: '你输入的内容'}，原本默认的price等属性会被直接删除。等你再切换到price输入框输入内容时，又会把heldItems覆盖为{price: '你输入的价格'}，plu属性丢失，就会显示undefined。

修改handlerOnChange的写法，更新状态时先解构原有状态的所有属性，再覆盖需要修改的字段即可，推荐使用函数式更新保证拿到的是最新的状态值：

const handlerOnChange = (e, type) => {
    setHeldItems(prevState => ({
        ...prevState,
        [type]: e.target.value,
    }));
};

如果提交数据后需要重置输入框，在handlerOnSubmit逻辑末尾调用setHeldItems重置为初始空对象即可：

setHeldItems({
    salesno: '',
    plu: '',
    price: '',
    dateandtime: '',
});
setEdit({});

内容的提问来源于stack exchange，提问作者sLurPPPP