Use effect多次调用

Question

在挂载组件时，我使用useEffect来更改状态变量。我正在使用redux进行状态管理。我面临的问题是使用效果被多次调用。

React.useEffect(() => {
    
    dispatch(getSingleCoin(id))

    setName(coinDetail?.name)
    setSymbol(coinDetail?.symbol)
    setLogourl(coinDetail?.logo)
    setPrice(coinDetail?.price)
    setLaunchDate(coinDetail?.launchDate)
    setWebsiteUrl(coinDetail?.websiteUrl)
    setNetwork(coinDetail?.chain)
    setAddress(coinDetail?.address)
    setTwitterUrl(coinDetail?.twitter)
    setTelegramUrl(coinDetail?.telegram)
    setRedditUrl(coinDetail?.reddit)
    setYoutubeUrl(coinDetail?.youtube)
    setCoinDescription(coinDetail?.description)
    setMarketCap(coinDetail?.marketCap)
  }, [coinDetail,dispatch, id, approveSuccess, disapproveSuccess])

我的改变状态变量的useEffect钩子。

export const coinDetailReducer = (state = { loading: true }, action) => {
  switch (action.type) {
    case COIN_DETAIL_REQUEST:
      return { loading: true }
    case COIN_DETAIL_SUCCESS:
      return { loading: false, coinDetail: action.payload.coin }
    case COIN_DETAIL_FAIL:
      return { loading: false, error: action.payload }
    case COIN_DETAIL_RESET:
      return {}
    default:
      return state
  }
}

我的reducer处理分派的操作。

Answer 1

在同一个useEffect上操作dispatch和处理其响应将导致无限的呈现循环。而是使用两个不同useEffect，一个用于分派，另一个基于响应发送到setState。

useEffect(() => {
    dispatch(getSingleCoin(id));
  }, [dispatch, id]);

useEffect(() => {
    setName(coinDetail?.name);
    setSymbol(coinDetail?.symbol);
    setLogourl(coinDetail?.logo);
    setPrice(coinDetail?.price);
    setLaunchDate(coinDetail?.launchDate);
    setWebsiteUrl(coinDetail?.websiteUrl);
    setNetwork(coinDetail?.chain);
    setAddress(coinDetail?.address);
    setTwitterUrl(coinDetail?.twitter);
    setTelegramUrl(coinDetail?.telegram);
    setRedditUrl(coinDetail?.reddit);
    setYoutubeUrl(coinDetail?.youtube);
    setCoinDescription(coinDetail?.description);
    setMarketCap(coinDetail?.marketCap);
  }, [coinDetail]);

Answer 2

每当他的一个依赖项发生变化时，useEffect就会运行。因此，每次[coinDetail,dispatch, id, approveSuccess, disapproveSuccess]发生变化时，它都会再次运行。

也许在useEffect's doc上看一下可能会有所帮助。