依赖项useEffect的执行顺序问题

场景:在需要进行修改操作,给整个表单赋值时,在子组件中有依赖父级项如props.test,父级props.test被修改了

子组件:

let [data, setData] = useState<array<any>>([])

useEffect(()=>{

//此处进行了一些初始化获取数据列表的操作

  setData([1,2,3])

},[])

useEffect(()=>{

//此处有根据初始化数据去遍历,转换得到值的操作

  let min = Math.min(...data)

  console.log(min)

},[props.test])

结果:会发现得到的并不是期望的最小值1;

因为此时子组件依赖父级props.test依赖项的useEffect会先执行,data此时是没有数据的,因为还没有执行第一个只执行一次的hook,因此结果不相符。

*所以并不是说没有依赖的,只执行一次的useEffect写在最上面就会先执行

修改如下,添加依赖项:

useEffect(()=>{

  let min = Math.min(...data)

  console.log(min)

},[props.test,data])

这样执行顺序就是:父级依赖项props.test的hook执行,然后是不带依赖项的hook执行一次,最后是带data的依赖项执行。

也就能得到最终结果了。

原文地址:https://www.cnblogs.com/xinyouhunran/p/15156857.html