无法在反应中使用地图访问我的状态答案

【问题标题】：can not access to my state using map in react无法在反应中使用地图访问我的状态
【发布时间】：2021-09-29 00:55:17
【问题描述】：

我有一个州，我想使用地图来通过它，

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 不是函数，知道吗？

【问题讨论】：

map() 用于数组。您在卡片布局中只有一项

标签： reactjs

【解决方案1】：

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

【讨论】：

所以我需要添加更多项目？
不，你需要像这样制作它和对象数组：const [cardlayouts,setCardLayouts]=useState([{id:"1",title:"title1",img:{pic1},text:"text1"}])
谢谢它有效，你能告诉我第二部分在我的数组中做什么吗？我的意思是 setCardLayouts？
setCardLayouts 用于设置cardlayouts 的值。如果您想了解更多关于 useState 钩子的信息，请参考：stackoverflow.com/questions/53165945/what-is-usestate-in-react

【解决方案2】：

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

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

【讨论】：

【解决方案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>
  );
}

【讨论】：