在变量更改时对UseSelector和render进行反应

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存储中选择变量。您似乎想做的是更新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。

希望这会给您一些指导。