React中快速输入TextField导致页面崩溃的问题求助

快速在TextField中输入内容时网站崩溃显示空白白屏，仅快速输入时出现该问题，慢速输入无异常。控制台报错：

Uncaught TypeError: Cannot read properties of null (reading 'value')

错误指向代码行：tempItems[index][0] = event.currentTarget.value;

相关代码 #

TextField组件

<TextField
    label="Item name"
    variant="filled"
    required
    color="primary"
    onChange={handleItemNameChange}
    id={`${id}`}
    defaultValue={items[id][0]}
/>

handleItemNameChange函数

const handleItemNameChange = (event) => {
    let index = event.currentTarget.id;
    setItems((items) => {
        const tempItems = [...items];
        tempItems[index][0] = event.currentTarget.value;
        return tempItems;
    });
};

问题原因 #

React的合成事件采用事件池化机制，事件对象会被复用或回收。setItems的回调是异步执行的，当快速输入触发多次onChange时，事件对象可能已经被React回收，此时event.currentTarget会变为null，导致读取value时抛出错误。

解决方案 #

在setItems回调外部提前提取event.currentTarget的id和value，保存到普通变量中，再在回调里使用这些变量：

const handleItemNameChange = (event) => {
    const index = event.currentTarget.id;
    const newValue = event.currentTarget.value; // 提前提取需要的值
    setItems((items) => {
        const tempItems = [...items];
        tempItems[index][0] = newValue; // 使用提前保存的变量
        return tempItems;
    });
};

这样即使事件对象被回收，提前保存的index和newValue依然有效，不会出现null读取错误。

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