如何使用useEffect处理监听多个变化？

发布于 2025-01-11 04:33:51 字数 602 浏览 0 评论 0原文

我正在聆听多个价值观，并为这些价值观执行不同的操作。问题是我不知道阻止它们在第一次渲染时运行的最佳方法是什么。假设我有：

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

useEffect(()={
   // action 1
},[firstValue, secondValue, thirdValue])

useEffect(()={
   // action 2
},[fourthValue])

useEffect(()={
   // action 3
},[fifthValue])

我查看了 isMounted = useRef(false) 示例，但只有当您只有 1 个额外的 useEffect 时它才有效。

原文

I have multiple values I'm listening to and different actions to perform for those values. Problem is that I don't know what is the best way to prevent them from running on first render. Let's say I have:

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

useEffect(()={
   // action 1
},[firstValue, secondValue, thirdValue])

useEffect(()={
   // action 2
},[fourthValue])

useEffect(()={
   // action 3
},[fifthValue])

I looked into isMounted = useRef(false) example, but it works only if you have just 1 extra useEffect.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小情绪 2025-01-18 04:33:51

我查看了 isMounted = useRef(false) 示例，但它仅在以下情况下才有效
您只有 1 个额外的 useEffect。

我认为您假设您必须更新组件中第一个useEffect挂钩内的isMounted引用。

请记住，每个渲染周期都会按声明顺序调用所有钩子。如果您希望所有三个 useEffect 挂钩跳过初始渲染，则不要更新 isMounted 引用，直到之后这三个挂钩都有机会更新至少运行一次。

例子：

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

const isMountedRef = useRef(false);

useEffect(()={
  // action 1
}, [firstValue, secondValue, thirdValue]);

useEffect(()={
  // action 2
}, [fourthValue]);

useEffect(()={
  // action 3
}, [fifthValue]);

useEffect(() => {
  isMountedRef.current = true; // <-- now mutate the ref
}, []);

I looked into isMounted = useRef(false) example, but it works only if
you have just 1 extra useEffect.

I think you are assuming you must update the isMounted ref within the first useEffect hook in the component.

Remember that all hooks are called each render cycle in the order they are declared. If you want all three useEffect hooks to skip the initial render then don't update the isMounted ref until after all three have had a chance to run at least once.

Example:

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

const isMountedRef = useRef(false);

useEffect(()={
  // action 1
}, [firstValue, secondValue, thirdValue]);

useEffect(()={
  // action 2
}, [fourthValue]);

useEffect(()={
  // action 3
}, [fifthValue]);

useEffect(() => {
  isMountedRef.current = true; // <-- now mutate the ref
}, []);

回复收藏 0 原文

擦肩而过的背影 2025-01-18 04:33:51

如果预期的功能是阻止在初始渲染期间执行 useEffect 内的代码，只需将代码保留在 if 条件内，该条件将检查每个状态的值是否不是该状态的初始值。

前任：

const [firstValue, setFirstValue] = useState(null);
const [secondValue, setSecondValue] = useState(null);
const [thirdValue, setThirdValue] = useState(null);
const [fourthValue, setFourthValue] = useState(null);
const [fifthValue, setFifthValue] = useState(null);

useEffect(()={
if(firstValue!==null&&secondValue!==null&&thirdValue!==null){
   // action 1
}
},[firstValue, secondValue, thirdValue])

If the expected functionality is to prevent execution of a code inside useEffect during initial rendering, just keep the code inside an if condition which will check if each of the states have the values that is not the initial value of that state.

Ex:

const [firstValue, setFirstValue] = useState(null);
const [secondValue, setSecondValue] = useState(null);
const [thirdValue, setThirdValue] = useState(null);
const [fourthValue, setFourthValue] = useState(null);
const [fifthValue, setFifthValue] = useState(null);

useEffect(()={
if(firstValue!==null&&secondValue!==null&&thirdValue!==null){
   // action 1
}
},[firstValue, secondValue, thirdValue])

回复收藏 0 原文

~没有更多了~