在 React 中，当我在 TextField 中输入太快时，为什么我的网站会崩溃？

Question

在我的应用程序中，当我在 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;
});
};

当我输入太快时，我得到的控制台错误如下：

未捕获的类型错误：无法读取 null 的属性（读取“值”）

此错误来自以下行：tempItems[index][0] = event.currentTarget.value;

只有当我在 TextField 中快速键入时才会出现此问题。

非常感谢解决此问题的任何帮助！

当我在 TextField 中缓慢键入时不会出现此问题，只有当我在其中快速键入时才会出现。 我觉得它与 setItems 挂钩有关，因为 Items 数组经常更新？

Answer 1

传递给setItem的 function 不会立即执行，到时候，可能浏览器将事件 object 重用于其他用途。 您应该将event.currentTarget.value存储在 function 之外的变量中，就像您对index所做的那样。

Answer 2

“值未定义”，我在任何地方都看不到值属性。