React - 使用useMemo()仍然会导致键盘输入速度减慢-PHP中文网问答

我有这样的代码，其中有很多输入框，每个输入框都用于修改一个价格值。由于输入框的数量很多（每个区域有3个价格，每个价格有3个定价），为了避免每次重新渲染所有内容，我在更新输入框值的函数上使用了useMemo，并且除此之外，我还使用了useReducer来避免代码过长以控制输入框。

然而，输入字符（或数字）并不是瞬间显示的，而是需要一段短暂的时间才能显示出来，更不用说连续的输入了。

const handleUpdate = useMemo(
    () => (property, valu, obid) => {
      dispatch({ type: "UPDATE_DATA", property, payload: valu, id: obid });
    },
    [dispatch]
  );

而且还有reducer：

function reducer(state, action) {
    switch (action.type) {
...
case "UPDATE_DATA":
        return {
          ...state,
          data: state.data.map((item) => {
            if (item.id === action.id) {
              return { ...item, [action.property]: action.payload };
            }
            return item;
          }),
        };
}
}

我建议检查整个代码，因为问题（或解决方案）可能在其他地方。为了查看整个代码，您可以参考此sandcodebox链接。请原谅我复制了部分代码，导致css格式不好。请注意，fetch函数已被模拟数据的长数组替换。

链接：https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js