时间戳

首页 > 解决方案 > 组件挂载后由上下文更改触发的 useEffect

reactjs - 组件挂载后由上下文更改触发的 useEffect

问题描述

context我正在尝试在using上运行一个函数useEffect，但在组件安装之后。否则，该函数在第一次加载上下文时运行，并给出错误的结果。我很想在加载后运行的useEffect另一个里面嵌套一个，但我不能。useEffect如何触发useEffect等到 componentDidLoad 运行？我需要将我的功能组件恢复为类功能吗？

这是我运行的效果

  useEffect(() => {
    let count = Object.keys(context).filter((x) => context[x] !== "").length;
    numChange = count;
  }, [context]); <=== run AFTER the original update of the context

澄清。上下文是一个对象，我计算了有多少对象属性具有值。由于最初计算上下文（假设 10 个属性中有 5 个已经具有值），因此“数字 === 5”。但是我想要做的是在组件安装时在上下文中计算具有值的初始属性数量之后的更改。因此，如果 n = 5，我想计算在 n 之后获得值的任何属性。

标签： reactjs

解决方案

当你useEffect有一个依赖并且你想像 a 一样表现它时componentDidMount，添加一个 ref 检查就足够了：

const isMounted = useRef(false);

useEffect(() => {
  if (!isMounted.current) {
    let numChange = Object.keys(context).filter((x) => context[x] !== "")
      .length;
    setState(numChange);
    isMounted.current = true;
  }
}, [context]);

推荐阅读