在变量更改时将 UseSelector 与渲染反应

Question

我正在尝试根据组件中的选定值 (selectedNum) 从使用 Redux 的状态中检索过滤后的数组。但是，在 selectNumberHandler 触发后，重新渲染似乎不会触发调用 useSelector 。

我试图在处理程序本身中过滤数字数组，但这似乎也没有过滤全局范围内的渲染数字。

我也尝试添加以下内容，但无济于事（在 onChange 中设置 var 后未命中调试器点）：

  useEffect(() => {
    debugger;
  }, [selectedNum]);

您能帮我找到解决这类问题的最佳做法吗？

const MyFunction = () => {
  let selectedNum: number;
  let numbers = useSelector(filterNumbers(selectedNum));

  const selectNumberHandler (selectedValue) => {
      selectedNum = selectedValue;
  }

  return (
    <div>
      <select onChange={e => selectNumberHandler(e)}>
        <option value='1' >1</option>
        <option value='2' >2</option>
      </select>
      <div className={'numbers-list'}>
        {numbers.map(num => {
          <p>{num}</p>;
        })}
      </div>
    </div>
  );
};

Answer 1

useSelector 将状态函数作为参数。 State 是 redux 存储的状态。像这样：

const numbers = useSelector(state => somewhereinstate.number);

这样，我们就可以从redux store中选择变量了。您似乎想要做的是更新 selectedNum 变量。但我看不到您将该更新发送到商店的位置。您的useEffect 不会触发，因为它依赖于selectedNum。您的 selectNumberHandler 可能会更改 selectedNum，但您的组件不知道这一点，因为 selectedNum 不是组件中的状态变量。

所以你需要决定：你是保持组件本地的状态，还是通过商店进行通信？

组件本地 - 没有 useSelector

const MyFunction = () => {

  const [selectedNumber, setSelectedNumber] = useState(1)
  const [filteredNumbers, setFilteredNumbers] = useState([])

  useEfect( () => {
    setFilteredNumbers(selectedNumber)
  }, [selectedNumber])

  return (
    <div>
      <select onChange={e => setSelectedNumber(e.value)}>
        <option value='1' >1</option>
        <option value='2' >2</option>
      </select>
      <div className={'numbers-list'}>
        {filteredNumbers.map(num => {
          <p>{num}</p>;
        })}
      </div>
    </div>
  );
};

通过 redux 存储，使用 useDispatch 和 useSelector

const MyFunction = () => {

  const numbers = useSelector(state => state.yourValues);
  const dispatch = useDispatch()


  return (
    <div>
      <select onChange={e => dispatch( setYourValues(e.value) )}>
        <option value='1' >1</option>
        <option value='2' >2</option>
      </select>
      <div className={'numbers-list'}>
        {numbers.map(num => {
          <p>{num}</p>;
        })}
      </div>
    </div>
  );
};

其中setYourValue 是一个函数，它创建一个操作来更新redux 存储中的yourValue。

希望这能给你一些方向。