React 组件输出数据库信息

Question

我正在制作一个食谱网站，但无法用语言表达我想做的事情。

我有一个组件 (home.js)，我试图在其上显示不同的食谱帖子。

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

我这样做对吗？我有点迷茫，不知道我应该如何做到这一点，甚至我会用谷歌来帮助实现这一目标。

我会很感激你朝着正确的方向前进。

Answer 1

我不是 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;
}