1

在我的 React 应用程序中，我使用react-multi-carousel. 但是，它只发生在 Google Firebase 托管上。它在本地运行良好。

我的项目是用 Vite 和 Tailwind CSS 创建的。

错误：

错误：缩小的 React 错误 #130；访问https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=获取完整消息，或使用非缩小开发环境获取完整错误和其他有用的警告。

翻译为：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

主页.jsx

    import React, { useState, useEffect } from "react";
    import { useQuery } from "@apollo/client";
    import GitaCarousel from "../../components/gita_carousel";
    import { getHome, getHomeVariable } from "../../gql/home";

    const HomePage = () => {
      const [artists, setArtists] = useState();

      const { loading, error, data } = useQuery(getHome, {
        variables: getHomeVariable(10),
      });

      useEffect(() => {
        if (!loading && !error) {
           const a1 = data?.artists.map((artist) => ({
            id: artist.id,
            title: artist.name,
            subTitle: "",
            imageUrl: artist.profile_picture,
          }));
          setArtists(a1);
         }
      }, [loading, error]);

      return (
    <div>
      {artists && artists.length > 0 ? (
        <div className="flex flex-col my-5 items-center">
          <div className="flex-1 px-2 mx-2">
            {/* <div className="text-lg font-bold">{constants.latest_monks}</div> */}
          </div>
          <div>
            <GitaCarousel data={artists} />
          </div>
        </div>
      ) : (
        <div></div>
      )}
    </div>
     );
    };

    export default HomePage;

gita_carousel.jsx

    import React from "react";
    import Carousel from "react-multi-carousel";
    import "react-multi-carousel/lib/styles.css";
    import { PlayIcon } from "../assets/icons/svg_icons";

    const responsive = {
      superLargeDesktop: {
        // the naming can be any, depends on you.
        breakpoint: { max: 4000, min: 3000 },
        items: 5,
      },
      desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 5,
      },
      tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2,
      },
      mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
      },
    };

    const GitaCarousel = (props) => {
      const { data } = props;

      return (
    <div className="container mx-auto px-4 md:px-12">
      <div className="flex flex-wrap -mx-1 lg:-mx-4">
        <Carousel
          swipeable={false}
          draggable={false}
          showDots={true}
          responsive={responsive}
          ssr={true}
          infinite={true}
          autoPlaySpeed={1000}
          keyBoardControl={true}
          customTransition="all .5"
          transitionDuration={500}
          containerClass="carousel-container"
          removeArrowOnDeviceType={["tablet", "mobile"]}
          deviceType="desktop"
        >
          {data.map((slide, index) => {
            return (
              <div
                key={index}
                className="group my-1 px-1 w-full cursor-pointer"
                onClick={() => {
                  onClickHandler(slide.id);
                }}
              >
                <article className="overflow-hidden rounded-lg shadow-lg">
                  <div className="relative cursor-pointer">
                    <img
                      alt="Placeholder"
                      className="block object-cover h-48 w-96"
                      src={slide.imageUrl}
                    />
                    <button className="absolute top-1/2 right-1/2 -mr-3 -mt-3 rounded-lg opacity-0 group-hover:opacity-100">
                      <PlayIcon className="text-primary" />
                    </button>
                  </div>

                  <header className="items-center justify-between leading-tight p-2 md:p-4">
                    <h1 className="text-sm">{slide.title}</h1>
                    <h2 className="text-xs text-gray-400">{slide.subTitle}</h2>
                  </header>
                  
                  
                </article>
              </div>
            );
          })}
        </Carousel>
        </div>
        </div>
      );
    };

    export default GitaCarousel;
4

1 回答 1

0

好的，我解决了这个问题。这是由于导出默认或导出典型问题而发生的，但我不知道插件是如何导出的。

以下是修复程序，它对我有用。

import Carousel from "react-multi-carousel";

const RMCarousel = Carousel.default? Carousel.default: Carousel;
<RMCarousel></RMCarousel>
于 2022-02-07T08:51:40.923 回答