React Redux-输入onchange非常滞后

时间:2019-12-21 19:04:35

标签: javascript reactjs redux

我正在使用材料ui输入和Redux以及Redux持久化。

此刻我使用以下功能:

const newInput = ({
  classes, name, langKey, rdxConf, configs,
}) => {
  const dispatch = useDispatch();
  const dispatchFns = {
    setInputVal: (category, key, value) => {
      dispatch(Action.setInputVal(category, key, value));
    },
  };
  const { dataFromRdx } = useData();
  const { contribution } = dataFromRdx;

  const valueFromRdx = contribution[rdxConf.category][rdxConf.name];
  const [data, setData] = useState(valueFromRdx || '');
  const throttled = useRef(
    throttle((newValue) => dispatchFns.setInputVal(rdxConf.category, rdxConf.name, newValue), 500)
  );
  useEffect(() => throttled.current(data), [data]);

  return (
    <TextField
      type={configs && configs.type ? configs.type : 'string'}
      // eslint-disable-next-line no-prototype-builtins
      className={configs && configs.hasOwnProperty('fullWidth') ? classes.fullWidthInput : classes.input}
      // eslint-disable-next-line no-prototype-builtins
      multiline={configs && configs.hasOwnProperty('multiline') ? configs.multiline : false}
      name={name}
      label={t(langKey)}
      value={valueFromRdx}
      onChange={(e) => {
        setData(e.target.value);
      }}
    />
  );
};

我在https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations上找到了以下代码片段,并尝试了一下,但是它仍然太慢了:

const [text, updateText] = useState('');
  const textRef = useRef();

  useEffect(() => {
    textRef.current = text; // Write it to the ref
  });

  const handleSubmit = useCallback(() => {
    const currentText = textRef.current; // Read it from the ref
    alert(currentText);
  }, [textRef]);

有人可以在这里帮忙吗?我在做什么错了?

0 个答案:

没有答案