从 redux useSelector 钩子加载所有内容后，如何仅调用一次 useEffect ？

Question

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

如果有指定的卖方和买方，我正在尝试禁用“买方”和“卖方”下拉菜单。 但是，如果只有一个买方或只有一个卖方，而另一个仍未被选中（仍然具有默认值 -1），我希望能够使用下拉列表来选择买方/卖方，而不会在下拉菜单之后立即禁用买方和卖方已被选中，因此我试图让它只运行一次。 相反，应在下次重新加载/刷新整个页面时禁用下拉菜单。

我遇到的问题是，如果我使用带有空依赖项数组的 useEffect 以便它只运行一次，它似乎在实际加载来自 redux hooks 的数据之前运行。 从 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将仅执行一次。