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

Question

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

在使用 debounce 动作调度动作后，组件自动完成重新呈现，我得到初始状态。所以由于去抖功能，输入在 300 毫秒后变为空。

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

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

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

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

storing value from text input into redux store cause re-rendering react component

reactjs

redux

react-redux

redux-toolkit