在 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