抵触useEffects？

如何解决抵触useEffects？

我觉得我经常遇到这个问题。

当状态改变后触发useEffects链接时，我发现链中的某些useEffects具有重叠的依赖关系，这导致它们在设置为状态后都被触发，而不是顺序触发。

示例：chapterIndex更新时，我触发了useEffects链。

let [ chapterIndex,setChapterIndex ] = useState<number | null>(0);

let [textTransitioning,setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
    setTextTransitioning('out')
},[chapterIndex])

useEffect(() => {
    if (chapterIndex !== null) {
        const {
            current: chapter = null
        } = chapterRefs.current[chapterIndex];
            
        if (textTransitioning === 'in') {
            chapter?.classList.add('in');
        }
    }
},[textTransitioning,chapterIndex])

当chapterIndex更改时，如何防止两者同时运行？我只希望第二个useEffect在第一个useEffect设置为textTransitioning之后运行。从依赖项数组中删除chapterIndex时，出现错误：'React Hook useEffect缺少依赖项：'chapterIndex'。要么包含它，要么删除依赖项数组。'

解决方法

useEffect接受2个参数。第一个是要调用的函数，第二个是称为依赖项数组的变量数组。第二个参数用于在数组中的变量之一更改时触发使用效果。 因此，如果您不希望在更改特定变量时调用useEffect，请不要在依赖项数组中传递该变量。您的代码应为：

let [ chapterIndex,setChapterIndex ] = useState<number | null>(0);

let [textTransitioning,setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
      setTextTransitioning('out')
},[chapterIndex])

useEffect(() => {
 if (chapterIndex !== null) {
     const {
         current: chapter = null
     } = chapterRefs.current[chapterIndex];
         
     if (textTransitioning === 'in') {
         chapter?.classList.add('in');
     }
 }
},[textTransitioning]

我认为让一个useEffect触发另一个不是很有效，但是也许我看不到整个画面

,

您需要在第二个useEffect中从数组中删除“ chapterIndex”。因此，当第一个useEffect运行时，它将更新将导致第二个useEffect触发器的“ textTransitioning”。

有关useEffect的更多条件执行，您可以参考https://reactjs.org/docs/hooks-effect.html