时间戳

首页 > 解决方案 > React Hook useEffect 缺少依赖项问题

reactjs - React Hook useEffect 缺少依赖项问题

问题描述

我有这个问题：

 Line 25:7:  React Hook useEffect has missing dependencies: 'getSingleProductData', 'isProductOnSale', and 'productData'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

这是代码：

    type SingleProductParams = {
    s_id:string;
}

type SingleProductProps = RouteComponentProps<SingleProductParams>

const SingleProduct: React.FC<SingleProductProps> = (props) => {
    let [productData, setProductData] = useState<Partial<IProdItems>>({});
    let [isProductOnSale, setIsProductOnSale] = useState<Sale['onSale']>();

    useEffect( () => { 
        setIsProductOnSale(productData.sale?.onSale);
        getSingleProductData();
        console.log(productData);
        console.log(isProductOnSale);
        console.log(props.match.params.s_id);
    },[props]) 
    
    const getSingleProductData = async() => { 
        let url = URL_API + "/products/single/" + props.match.params.s_id;
        let data = await doApiGet(url);
        console.log(data);
        setProductData(data);
    }

我该如何解决？我从谷歌尝试了各种方法，但这不起作用。但是页面一切正常，我得到了数据，一切都很好。我应该禁用错误吗？我必须提到，useEffect 中的控制台日志是未定义的，但站点中显示的数据！

标签： reactjstypescript

解决方案

警告意味着您需要以这种方式添加getSingleProductData, isProductOnSale and productData到useEffect's deps 列表中：

useEffect( () => { 
    setIsProductOnSale(productData.sale?.onSale);
    getSingleProductData();
    console.log(productData);
    console.log(isProductOnSale);
    console.log(props.match.params.s_id);
},[props, getSingleProductData, isProductOnSale, productData]) //<-- here add them

警告消失了。

编辑

通过添加这些依赖项，您可能会遇到loop问题（useEffect具有将自行更新的依赖useEffect项）。

在这种情况下，您可以初始化多个useEffects，每个人都有所需的依赖项：

useEffect(() => {  //<-- this useEffect to set productData (it runs just one time at component loading)
    getSingleProductData(); 
},[]) 

useEffect(() => { //<-- this useEffect to set isProductOnSale every time productData changes 
   setIsProductOnSale(productData.sale?.onSale);
}, [productData])

useEffect(() => { //<-- this useEffect print stuff
    console.log(productData);
    console.log(isProductOnSale);
    console.log(props.match.params.s_id);
}, [productData, isProductOnSale, props])

推荐阅读