无法将数据作为道具传递并在反应js的UI中呈现

Question

我已经使用扩展运算符将来自 api（在 Heroku 服务器中提供）的数据作为道具传递给子组件。数据不会在 ui 中呈现。虽然没有任何错误显示。我不确定是什么问题。不过我收到了一些警告。

我的 MenuPage.js

function MenuPage() {

  const[menu,setMenu] = useState([])

  useEffect(() => {
    axios.get('https://texas-crm1.herokuapp.com/api/menus')
    .then (res => {
      console.log(res.data)
      let data = res.data

      setMenu(res => {
        return [
          {
          title: data.category,
          thumbanail: data.image,
          }
        ]
      })
    })
    .catch(err =>{
      console.log(err)
    })
  
  },[])

  return (
    <div>
      <div className="menu-page">
      <PageHeader title="Explore All Menu" btnText="" />
      <div className="container">
        {menu.map((menu, index) => {
          return <MenuComponent  {...menu} key={index} />;
        })}
      </div>
    </div>
  </div>
  );
}

export default MenuPage;

我的 MenuComponent.txs

const MenuComponent = (props: any) => {

  
  const starterMenu = [
    {
      thumbnail: props.thumbnail,
      title: props.title,
      rating: 4.5,
      description:
        "Roast beef is served with vegetables and sweet and sour sauce.",
      price: "$ 15.23",
    },
    {
      thumbnail: thumbnail,
      title: "Tilapia Chili Sauce",
      rating: 4.5,
      description: "Savory fried tilapia with basil sauce, eaten warm with rice",
      price: "$ 13.99",
    },
    {
      thumbnail: thumbnail,
      title: "Avocado Egg Bread",
      rating: 4.5,
      description:
        "Breakfast goes well with hot tea and bread with avocado jam and eggs",
      price: "$ 10.99",
    },
    {
      thumbnail: thumbnail,
      title: "Spicy dumplings udon",
      rating: 4.5,
      description: "For those who like spicy food, you should try this udon",
      price: "$ 12.42",
    },
  ];

  const renderMenuList = () => {
    switch (props.name) {
      case "Starters":
        return <Starters />;

      case "Main Courses":
        return <MainCourses />;

      case "Soups & Salads":
        return <SoupsSalads />;

      case "Sliders":
        return <Sliders />;

      default:
        break;
    }
  };

  return (
    <div className="menu-component">
      <div className="title">
        <div className="main-title">{props.name}</div>
      </div>
      <div className="menu-cards">
        {starterMenu.map((starterItem, index) => {
          return <MenuCard {...starterItem} key={index} />;
        })}
      </div>
      {renderMenuList()}
    </div>
  );
};

export default MenuComponent;

渲染的组件如下所示：

如上图所示，我使用了 get axios 中的数据，它是空白的（没有标题和缩略图），在第二张图片中它是可以的，因为它使用的是静态数据。我是新手，所以我需要帮助。

Answer 1

尝试将您的回复转换为JSON，如下所示：

useEffect(() => {
    axios.get('https://texas-crm1.herokuapp.com/api/menus')
    .then(res => res.json())
    .then(data => {
    // do what ever you want with the data.  
    }).catch(error){
      console.log(error);
}

  
  },[])

Answer 2

the issue here:-
  setMenu(res => {
        return [
          {
          title: data.category,  //menu object is title but you call "name" at the component
          thumbanail: data.image,
          }
        ]
      })
//at the component
   <div className="main-title">{props.name}</div> // this should be {props.title}