无法使用react中的map访问我的状态

Question

我有一个状态，我想用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不是一个函数，知道吗？

Answer 1

这是因为您正在object上尝试map。您的cardlayouts是对象。只能在阵列上使用map

Answer 2

这样编辑代码。要映射，您应该有一个数组。但你却给出了一个对象。

const [cardlayouts, setCardLayouts] = useState([{id:"1",title:"title1",img: 
{pic1},text:"text1"}])

Answer 3

.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>
);
}