REACT 使用 MAP 或 forEach 不显示任何内容

如何解决REACT 使用 MAP 或 forEach 不显示任何内容

我是 React 的新手，我在这里寻求帮助。 render 方法不会渲染任何东西，没有错误，没有看到我搞砸的地方。我确定“recetas”中有一系列项目，因为我检查了它，但是地图没有通过该阵列，我不明白为什么。我知道可能是因为函数中的“await”和“async”，但这应该不是问题。我确定解决方案很简单，但我看不到！

---

import React from 'react';

export default class Favoritas extends React.Component{
  state = {
    recetas: []
  }

  async componentDidMount() {
     const req= await fetch('https://scrap-cook-servicio-web.herokuapp.com/recetas');
     const res= await req.json();
     this.setState({recetas: res.message});  
 }

  render() {
    return(
      <div>
        {this.state.recetas.map((receta,i) => {
            <div className="mt-5 max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
              <div className="md:flex">
                <div className="md:flex-shrink-0">
                  <img className="h-48 w-full object-cover md:w-48" src="/favicon.ico" alt="Man looking at item at a store"/>
                </div>
                <div className="p-8">
                  <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">TYPE</div>
                  <a href="#" className="block mt-1 text-lg leading-tight font-medium text-black hover:underline">TITLE</a>
                  <p className="mt-2 text-gray-500">DESCRIPTION</p>
                </div>
              </div>
            </div>
        })
        }
      </div>
    )
  }
}

我希望你能帮助我，我会感谢任何帮助！

解决方法

您的 map 函数是一个未返回的 JSX 块。您有两种选择来执行此操作。

render() {
    return(
      <div>
        {this.state.recetas.map((receta,i) => (
            <div key={receta.id}>...</div>
          ))
        }
      </div>
    )
  }

或

render() {
    return(
      <div>
        {this.state.recetas.map((receta,i) => {
            return (
              <div key={receta.id}>...</div>
            )
          })}
      </div>
    )
  }

只要确保您的 JSX 有一个独特的 key 包裹在外部元素周围。我在这里假设每个 receta 都有一个 id，因此您可能需要在最后更新它。