分享
三行代码  ›  专栏  ›  技术社区  ›  masali

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

  •  0
  • masali  · 技术社区  · 5 天前

    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 回复  |  直到 5 天前
        1
  •  2
  •   Sanket Shah    5 天前

    map object . 你的 cardlayouts 是对象。你可以用 仅在阵列上

        2
  •  0
  •   Pasindu Prabhashitha    5 天前

    const [cardlayouts, setCardLayouts] = useState([{id:"1",title:"title1",img: 
    {pic1},text:"text1"}])
    
        3
  •  0
  •   jordanjlatimer    5 天前

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