Javascript 响应组件以输出数据库信息

我制作了一个食谱网站，但很难用语言表达我想做的事情

我有一个组件（home.js），我正试图在其中显示不同的食谱帖子

我的想法是，我可以制作一个名为recipe.js的组件，该组件将具有如何布置配方帖子的结构。然后，当它从我的数据库中提取所有配方信息时，所有配方信息都将显示在该结构中。这样一来，我就不必为每个配方都添加单独的成分

我这样做对吗？我有点不知所措，不知道我该怎么做，甚至不知道我会用谷歌来帮助实现这一点

---

如果我能朝着正确的方向努力，我将不胜感激。

我不是一个完全的React专业人士，但我认为useFetch会起作用：它会使用传入的道具从数据库中提取信息

import React from 'react';
import { useFetch } from 'react-async';

export const Recipe = (props) => {
  const { data, error } = useFetch(`https://swapi.co/api/people/${id}/`, {
    headers: { accept: "application/json" },
  })
  if (error) return error.message
  if (data) return (<div className="recipe"></div>)
  return null;
}

从“React”导入React；
从'react async'导入{useFetch}；
导出常量配方=（道具）=>{
const{data，error}=useFetch(`https://swapi.co/api/people/${id}/`{
标题：{accept:“application/json”}，
})
if（error）返回error.message
如果（数据）返回（）
返回null；
}

使用映射方法显示具有相同组件的项目数组。我会建议你检查这些文件-和@kimobrian254谢谢你，我会检查这些。