使用react-stacked-center-carousel遇React子元素无效错误求助

错误根源 #

你在Slide组件里错误地把data当成了完整数组处理，但实际上react-stacked-center-carousel会给每个Slide组件传入单个数据项作为data属性，而非整个数组。你写的data[dataIndex].image逻辑错误，最终触发了React渲染对象的报错。

修复后的Slide组件代码 #

import React from "react";
import { StackedCarouselSlideProps } from "react-stacked-center-carousel";
import "./Slide.css";

export const Slide = React.memo(function SlideComponent(props) {
  const {
    data,
    isCenterSlide,
    swipeTo,
    slideIndex
  } = props;

  // 直接使用单个数据对象的属性，无需从数组中索引
  const coverImage = data.image;
  const text = data.text;

  console.log(coverImage);
  return (
    <div className="card-card" draggable={false}>
      <div className={`cover fill ${isCenterSlide ? "off" : "on"}`}>
        <div 
          className="card-overlay fill"
          onClick={() => {
            if (!isCenterSlide) swipeTo(slideIndex);
          }}
        />
      </div>
      <div className="detail fill">
        <div className="discription">
          <img 
            style={{ width: 100 }}
            alt="card" 
            className="cover-image" 
            src={coverImage} 
          />
          <p>{text}</p>
        </div>
      </div>
    </div>
  );
});

关键修改点 #

• 把组件参数名从StackedCarouselSlideProps改为props，避免和导入的类型名冲突，提升代码可读性
• 移除dataIndex的解构与使用，直接通过data.image和data.text获取当前slide的内容
• 修正了原代码中JSX标签被错误拆分的格式问题

修改后组件就能正确渲染每个slide的内容，不会再触发"Objects are not valid as a React child"的错误。

内容的提问来源于stack exchange，提问作者Asad Ali