我正在使用材料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]);
有人可以在这里帮忙吗?我在做什么错了?