将文本输入的值存储到redux存储中会导致重新渲染react组件

Question

我正试图将文本输入的值存储到redux存储中，但问题是我的react组件仍在重新渲染。

在使用debounce操作调度操作之后，组件Autocomplete rerender和我得到了初始状态。因此，由于反跳函数，输入在300ms后变为空。

我试图使用useCallback来避免它，但没有任何结果。

如何将输入值保存到redux存储中并防止重新渲染react组件？

const AutoComplete = () => {
const [focus, setFocus] = useState(false);
const [blur, setBlur] = useState(false);
const radarTrends = useSelector(selectedRadarsTrends);
const dispatch = useDispatch();
const filteredValue = useSelector(selectedFilteredValue);

const debounceFilteredValue = (value) => {
dispatch(setFilteredValue(value));
}
const debounce = useCallback(_.debounce(debounceFilteredValue, 300), []);
const handleOnChange = (event) => {
debounce(event.target.value);
};
const handleOnFocus = () => {
setBlur(false);
setFocus(true);
};
const handleOnBlur = () => {
setFocus(false);
setBlur(true);
};
return (
<StyledAutoComplete hasFocus={focus} hasBlur={blur}>
<StyledMagnifier>
<Magnifier width={20} height={20} />
</StyledMagnifier>
<Input
placeholder="type trend name"
type="text"
label=""
name="autocomplete"
onFocus={handleOnFocus}
onChange={handleOnChange}
onBlur={handleOnBlur}
/>
</StyledAutoComplete>
);
};

谢谢你的帮助。

Answer 1

我认为re-render是由dispatch之后的useSelector引起的。

When an action is dispatched, useSelector() will do a reference comparison of
the previous selector result value and the current result value.
If they are different, the component will be forced to re-render.
If they are the same, the component will not re-render.

请参阅文档：https://react-redux.js.org/next/api/hooks#useselector