Question

我正在一个项目上，我必须将经典网站（HTML / JS）切换到React。

除了我在轮播的初始化（jQuery库）初始化方面遇到问题之外，这一切都进行得很好……

为清楚起见，我有几个组成部分（以下为“儿童”结构）：

-主页

----热门产品

-------- ProductsSlider

-----------------产品

因此，在Home组件中，我集成了TopProducts组件，该组件通过Axios进行API调用以获取产品列表，并将结果传递给ProductsSlider组件。

这很好。

API调用完成并生成组件后，我需要通过jquery函数初始化轮播。

这仅在将调用此函数的位置放在调用结果的状态变量的下方的axios“ .then”函数中时有效。

喜欢：

useEffect(() => {
    axios.get('products/bestsellers')
        .then(response => {
            setTopProducts(response.data.response);

            window.carousel_slider();
        });

}, []);

但是在这里（如果我在页面中还有另一个轮播...）是非常不清楚的，所以我想在我的Home组件中调用此函数，但是它不起作用，因为Home的useEffect始终在呈现TopProducts组件之前调用...

所以我不知道在呈现所有内容时如何调用它，我看到在Class组件下，ComponentWillUnmount应该可以工作，但是我想使用Hooks ...

我知道最好不要将jQuery与React一起使用，但是转换所有内容并查找在react上可能不存在的jquery库可能太长了。

我不知道我是否有正确的方法，有人知道吗？

提前谢谢

Answer 1

如果将axios调用包装在return中，它将表现为componentWillUnmount。

useEffect(() => {
    return () => {
       axios.get('products/bestsellers')
        .then(response => {
            setTopProducts(response.data.response);

            window.carousel_slider();
        });
    }
  }, [yourDependency]);

Answer 2

我发现了问题。

这是因为topProducts状态是带有空数组的init，并且React在呈现它之前不等待useEffect的结束，因此carousel_slider（）是用空组件执行的。

只需在渲染之前检查topProducts状态长度：

{topProducts.length > 0 ? (
    <ProductsSlider products={topProducts}/>
) : <Spinner />}

使用useEffect

2 个答案: