问题描述
我是 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,因此您可能需要在最后更新它。