從 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將僅執行一次。