输入的文本在材质UI v4的文本字段中显示较晚

Question

我在页面上有一个TextFields列表，用户可以在其中键入文本。data是整个数据集。问题就像下面的gif一样，文本在用户输入后显示几毫秒。为什么会这样?起初数据是在Redux中，我直接与它通信，现在我移动到本地usestate数据，我尝试了useMemo，我单独尝试了usestate，就像这样只针对笔记字段const [notes, setNotes] = useState(() => localData.map((office) => office.office?.notes || ""));，每次我输入数据时，每个字母有时会一次显示出来，有时会延迟几百毫秒。我将无法简单地移动到材质ui v5只是为了解决这个问题。

图片链接在下面，我不能在这里上传gifhttps://s2.gifyu.com/images/screen -记录- 2023 - 04 - 01 - - 11.25.18 am.gif

data.map((eachData, i) => {
return (
<TextField
value={eachData?.notes || ""}
onChange={(event) => updateOfficeData(i, event.target.value)}
/>
);
});

更新函数类似于

const updateData = (index, value) => {
let newData = JSON.parse(JSON.stringify(data));
newData[index] = value;
setData(newData);
};

Answer 1

答案似乎是用lodash的debounce函数包装updateData，并使用defaultValue prop而不是TextField的value prop