useEffect依赖多个

Question

const {id, name, visible} = this.props
useEffect(() => {
        const getData = async ()=>{
            const res = await fetch({id, name});
        }
        getData()
    }, [visible, id, name]);

假如这里依赖三个参数，如果props的三个参数都变，会请求三次接口，这个怎么解决？

如果只依赖visible，lint会报错，提示缺少依赖项

Answer 1

常规来说，依赖id、name才合适，为什么要依赖visible，如果只是因为visible为true的时候，才去调接口，你完全可以

const {id, name, visible} = this.props;
const getData = async ()=>{
    const res = await fetch({id, name});
}
useEffect(() => {
    if(visible) {
        getData()
    }
}, [visible, id, name]);

还有就是最好把接口请求提到外层

Answer 2

如果props的三个参数都变，会请求三次接口

难道是逐个变化？要不怎么会触发三次re-render呢，贴下完整代码看看？

Answer 3

const { id, name, visible } = this.props;
useEffect(() => {
  const getData = async () => {
    const res = await fetch({ id, name });
  };
  if (visible && id && name) {
    getData();
  }
}, [visible, id, name]);

这个场景一般是初次挂载的时候调用，如果props的id和name不会变的话，只需要判断一次有效的值，怎么会触发三次？

Answer 4

看我写的文章https://www.jianshu.com/p/ca6...