开发者问题收集

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

2023-02-01
267

在我的应用中,当我在 TextField 中输入速度过快时,我的网站会崩溃,并且我看到空白的白色屏幕。

这是代码。

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;
});
};

当我输入速度过快时,我收到的控制台错误如下:

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

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

只有当我在 TextField 中输入速度非常快时才会出现此问题。

非常感激任何帮助解决此问题的帮助!

当我在 TextField 中输入速度缓慢时不会出现此问题,只有当我输入速度稍快时才会出现此问题。我觉得这与 setItems 钩子有关,因为 Items 数组经常更新?


2个回答

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

Guillaume Brunerie
2023-02-01

“值未定义”,我没有在任何地方看到值属性。

Naftalib
2023-02-01