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

【问题标题】：In React, why does my website crash when I type too fast in the TextField?在 React 中，当我在 TextField 中输入太快时，为什么我的网站会崩溃？
【发布时间】：2023-02-01 15:40:27
【问题描述】：

在我的应用程序中，当我在 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 数组经常更新？

【问题讨论】：

利用？喜欢event.currentTarget?.value
您好，请查看stackoverflow.com/a/66086044/14953535。我希望它对你有用

标签： javascript reactjs react-hooks material-ui

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：