React 从 json-server 获取数据并显示在 slider

Question

我有一个 JSON 作为服务器，JSON 有一个“食谱”数组，里面有对象

"recipes": [
    {
      "id": "1",
      "title": "Arepa",
      "description": "...",
      "image": "...",
      "preparation": "...",
      "ingredients": "..",
      "notes": "..."
    },
    {
      "id": "2",
      "title": "Burritos",
      "description": "...",
      "image": "...",
      "preparation": "...",
      "ingredients": "...",
      "notes": "..."
    }

我试图将图像显示到带有循环的 slider 中，但我得到的唯一一件事是错误和沮丧，我无法轻松获取数据，但显示它让我出错，我尝试了很多东西，但没有任何效果。 这是我的代码。

TopTen.js

import { CarouselProvider, Slider, ButtonBack, ButtonNext } from 'pure-react-carousel';

const Topten = () => {
  return (
    <div id="topTenContainer">
      <CarouselProvider
        naturalSlideWidth={100}
        naturalSlideHeight={125}
        totalSlides={3}
      >
        <Slider>
          //// here must be the images ////
        </Slider>
        <ButtonBack>Back</ButtonBack>
        <ButtonNext>Next</ButtonNext>
      </CarouselProvider>
    </div>
  );
};

export default Topten;

当我尝试创建异步 function 并尝试放入时，出现此错误 => Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. 这里的例子

import database from "../api/database"

const Sliderr = async() =>{
    const responde = await database.get('recipes');
    const recipes = responde.data;

    return(
            {
                recipes.map(post =>{
                    return(
                        <div key={post.id}>
                            <h1>{post.title}</h1>
                        </div>
                    )
                })
            }
    )
}

export default Sliderr

请问有什么帮助吗？

Answer 1

您可以在控制台中打印“recipe”和“responde”值吗？ 如果可以打印，请尝试将指定变量的常量从“const”拉到“var”。首先，确保返回的答案。 进行分步操作。

Answer 2

 recipes?.map(post =>{
                    return(
                        <div key={post?.id}>
                            <h1>{post?.title}</h1>
                        </div>
                    )
                })

您必须检查数据是否有标题字段使用标记问题呈现 h1 组件

Answer 3

好吧，主要问题实际上正如日志中所述：您的 Slider 组件应该返回一个非异步 function。 当您在 TopTen.js 的 jsx 块中使用函数/功能组件“Sliderr”时，它会返回TopTen.js ，因为它被声明为异步 function。

您可以在 useEffect 中处理异步方面，例如

const Topten = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const getPosts = async () => setData(await database.get('recipes'));
    getPosts();
  }, []);

  return (
    <div id="topTenContainer">
      <CarouselProvider
        naturalSlideWidth={100}
        naturalSlideHeight={125}
        totalSlides={data.length}
      >
        <Slider>
          {data.map(post => <Slide>{post.title}</Slide>)}
        </Slider>
        <ButtonBack>Back</ButtonBack>
        <ButtonNext>Next</ButtonNext>
      </CarouselProvider>
    </div>
  );
};

您仍然需要将您的 Slider 组件重构为 Slide，尽管将 post.title 作为 children-prop。

在此基础上，您可以考虑将 api 调用提取到自定义挂钩中。

[编辑：对不起我的乐观态度。 我省略了请求的错误处理]