React从json-server获取数据并显示在滑块中

Question

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

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

这是我的代码。

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;

当我尝试创建一个异步函数并尝试将其放入时，I have => 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 here here示例

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".First of all，确保返回结果。执行分步操作。

Answer 2

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

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

Answer 3

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

你可以在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>
  );
};

您仍然需要将Sliderr组件重构为Slide，尽管将post.title作为子道具。

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

编辑:很抱歉我的乐观态度。我省略了请求的错误处理。