React 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将状态函数作为参数。 状态是 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。

希望这能给你一些方向。