无法在react中使用map访问我的状态
无法在react中使用map访问我的状态
提问于 2021-07-22 00:13:55
我有一个州，我想使用map来遍历它，
function App() {
const [cardlayouts,setCardLayouts]=useState({id:"1",title:"title1",img:{pic1},text:"text1"})
return (
<div className="App">
{
cardlayouts.map(s=><CardLayout id={s.id} title={s.title} img={s.img} text={s.text}/>)
}
</div>
);
}我得到一个错误，说cardlayouts.map不是一个函数，你知道吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-07-22 00:17:45
这是因为您正在object上尝试map。您的cardlayouts是object。您只能在阵列上使用map
Stack Overflow用户
发布于 2021-07-22 00:23:00
像这样编辑你的代码。要映射，您应该有一个数组。但是你已经给出了一个对象。
const [cardlayouts, setCardLayouts] = useState([{id:"1",title:"title1",img:
{pic1},text:"text1"}])Stack Overflow用户
发布于 2021-07-22 00:23:36
.map()是一个数组方法，但您的状态不是一个数组。
在这种情况下，您不需要使用map。只需像正常一样访问密钥即可：
function App() {
const [cardlayouts,setCardLayouts] = useState({
id:"1",
title:"title1",
img:{pic1},
text:"text1"
})
return (
<div className="App">
<CardLayout
id={cardlayouts.id}
title={cardlayoust.title}
img={card.img}
text={s.text}
/>
</div>
);
}或者，将状态设为数组，并按如下方式在其上映射：
function App() {
const [cardlayouts,setCardLayouts] = useState([
{
id:"1",
title:"title1",
img:{pic1},
text:"text1"
}
])
return (
<div className="App">
{cardlayouts.map(layout => (
<CardLayout
id={layout.id}
title={layout.title}
img={layout.img}
text={layout.text}
/>
))}
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68473041
复制相关文章
相似问题
腾讯云开发者
