Useeffect被多次调用答案

【问题标题】：Use effect getting called multiple timesUseeffect被多次调用
【发布时间】：2021-07-22 15:59:00
【问题描述】：

我正在使用 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 处理分派的动作。

【问题讨论】：

这很可能是因为您的请求为coinDetail 设置了一个新值，它再次触发了钩子。

标签： reactjs redux

【解决方案1】：

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

也许看看useEffect's doc 会有所帮助。

【讨论】：

我尝试完全删除依赖项，但它仍然被多次调用
如果依赖数组为空，那么该钩子将为组件的每个mount 调用一次。也许您的组件被安装了多次？
谢谢，coinDetail 是罪魁祸首。我从依赖列表中删除了它，问题就消失了。
很高兴为您提供帮助。请考虑接受其中一个正确的答案，以帮助未来的人快速找到解决方案。

【解决方案2】：

拥有dispatch 的动作并在同一个useEffect 上处理其响应将导致无限渲染循环。而是有两个不同的useEffect，一个用于调度，另一个用于根据响应设置状态。

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]);

【讨论】：

这真的很棒。以前从未使用过多个 useEffect。我现在已经很好地掌握了这个概念。谢谢。