我怎么能调用一个useEffect只有一次后，一切从redux useSelector钩子加载? &g

Question

我是React的新手，我想知道是否有可能使用一个useEffect，在所有Redux数据加载后只运行一次。

我正在尝试禁用"买家"one_answers";Seller"下拉列表，如果有指定的卖方和买方。然而，如果只有一个买家或只有一个卖家，而另一个仍然没有选择(仍然有默认值-1)，我希望能够使用下拉菜单选择买家/卖家没有立即禁用的下拉菜单后，买方和卖方已被选中，因此为什么我试图只让它运行一次。相反，应该在下次重新加载/刷新整个页面时禁用下拉菜单。

我遇到的问题是，如果我使用一个空的依赖数组的useEffect，这样它只会运行一次，它似乎是在redux钩子的数据实际加载之前运行。是否有一种方法可以让我在从redux加载所有内容后运行它，或者有任何其他方法可以让我这样做?相关规范如下:

const [selectedBuyerNumber, setBuyerNumber] = useState(-1);
const [selectedSellerNumber, setSellerNumber] = useState(-1);
const [disabled, setDisabled] = useState(false);
const dispatch = useDispatch();
const buyerNumber = useSelector(selectors.buyerNumberState);
const sellerNumber = useSelector(selectors.sellerNumberState);
const loaded = useSelector(selectors.loadingState);

useEffect(() => {
loaded && setBuyerNumber(buyerNumber ?? -1);
}, [buyerNumber, loaded]);
useEffect(() => {
dispatch(setBuyerNumber(selectedBuyerNumber));
}, [dispatch, selectedBuyerNumber]);
useEffect(() => {
loaded && setSelectedSellerNumber(sellerNumber ?? -1);
}, [sellerNumber, loaded]);
useEffect(() => {
dispatch(setSellerNumber(selectedSellerNumber));
}, [dispatch, selectedSellerNumber]);
useEffect(() => { 
setDisabled(selectedBuyerNumber !== -1 && selectedSellerNumber !== 1);
}
}, []);   //dependencies are empty because I only want this to run once and be disabled if both Buyer and Seller have previously been selected

return (
<FormGroup controlId='buyer'>
<ControlLabel>Buyer:</ControlLabel>
<FormControl
componentClass='select'
onChange={(e: any) => setBuyerNumber(e.target.value)}
value={selectedBuyerNumber}
disabled={disabled}>               
</FormGroup>

<FormGroup controlId='seller'>
<ControlLabel>Seller:</ControlLabel>
<FormControl
componentClass='select'
onChange={(e: any) => setSellerNumber(e.target.value)}
value={selectedSellerNumber}
disabled={disabled}>
</FormGroup>

Answer 1

这些是我将使用的useEffect:

useEffect(() => {
if (loaded) {   
setBuyerNumber(buyerNumber ?? -1);
setSellerNumber(sellerNumber ?? -1);
setDisabled((buyerNumber && sellerNumber) ? true : false)
}
}, [loaded]);
useEffect(() => {
dispatch(setBuyerNumber(selectedBuyerNumber));
}, [dispatch, selectedBuyerNumber]);
useEffect(() => {
dispatch(setSellerNumber(selectedSellerNumber));
}, [dispatch, selectedSellerNumber]);

使用第一个选项，您将设置是否要禁用下拉窗口。由于loaded状态只改变一次(加载时…)，useEffect将只执行一次。