时间戳

首页 > 解决方案 > 使用 useEffect 反应 init carousel jQuery lib

reactjs - 使用 useEffect 反应 init carousel jQuery lib

问题描述

我正在做一个项目，我必须将经典网站 (HTML/JS) 切换到 React。

除了轮播（jQuery库）的初始化有问题之外，这一切进展顺利......

需要明确的是，我有几个组件（下面的子结构）：

- 家

---- 顶级产品

-------- 产品滑块

- - - - - - - - 产品

因此，在 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 库会太长......

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

先感谢您

标签： reactjs

解决方案

我发现了问题。

这是因为 topProducts 状态是 init 且数组为空，并且 React 在渲染它之前不会等待 useEffect 结束，所以 carousel_slider() 是在空组件中执行的。

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

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

推荐阅读