React从json-server获取数据在pure-react-carousel轮播展示报错如何解决

你遇到的报错是因为React 客户端组件不能直接定义为 async 函数：async 函数执行后返回的是 Promise 对象，而 React 无法直接将 Promise 作为子元素渲染，所以抛出了Error: Objects are not valid as a React child (found: [object Promise])的错误。

不需要单独写 Sliderr 组件，直接在 TopTen 组件内通过 React 内置的 useState、useEffect Hook 处理异步数据请求和渲染即可，同时注意 pure-react-carousel 要求每个轮播项必须用内置的 Slide 组件包裹。

import { useState, useEffect } from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css'; // 必须引入轮播基础样式
import database from "../api/database";

const Topten = () => {
  // 存储食谱数据
  const [recipes, setRecipes] = useState([]);
  // 存储加载状态，避免空数据渲染异常
  const [loading, setLoading] = useState(true);

  // 组件挂载时发起请求获取食谱数据
  useEffect(() => {
    const fetchRecipes = async () => {
      try {
        const response = await database.get('recipes');
        setRecipes(response.data);
      } catch (err) {
        console.error('食谱数据请求失败：', err);
      } finally {
        setLoading(false);
      }
    };
    fetchRecipes();
  }, []);

  // 数据加载中展示提示
  if (loading) return <div>加载中...</div>;

  return (
    <div id="topTenContainer">
      <CarouselProvider
        naturalSlideWidth={100}
        naturalSlideHeight={125}
        totalSlides={recipes.length} // 总轮播数和食谱数组长度绑定，不要写死固定值
      >
        <Slider>
          {/* 遍历渲染食谱轮播项 */}
          {recipes.map((post, index) => (
            <Slide key={post.id} index={index}>
              {/* 渲染食谱图片 */}
              <img src={post.image} alt={post.title} style={{width: '100%', height: 'auto'}} />
              {/* 可自行扩展添加标题、描述等其他内容 */}
              <h3>{post.title}</h3>
            </Slide>
          ))}
        </Slider>
        <ButtonBack>上一张</ButtonBack>
        <ButtonNext>下一张</ButtonNext>
      </CarouselProvider>
    </div>
  );
};

export default Topten;

• 必须用 Slide 组件包裹每个轮播项，这是 pure-react-carousel 的强制要求
• 如果需要调整轮播项宽高比例，直接修改 CarouselProvider 的 naturalSlideWidth 和 naturalSlideHeight 比值即可
• 如果图片加载出现路径问题，自行检查 json-server 返回的 image 字段路径是否正确，是否需要补全服务端域名前缀

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