【问题标题】:Getting issue in props as"Cannot read property 'map' of undefined" [duplicate]在道具中出现问题“无法读取未定义的属性'地图'”[重复]
【发布时间】:2020-05-30 08:47:27
【问题描述】:

我是新来的反应。我在将包含对象的数组作为道具从一个组件传递到另一个组件时遇到问题。你们能帮我解决这个问题吗,

这是卡片信息组件的代码,我将值作为道具传递

const CardsInformation = () => {
    const Baba = [
        {
            id: 'b1',
            header: 'Book 1 Name',
            image: 'https://www.google.com/search?q=engineering+books&rlz=1C1CHBF_enIN862IN862&sxsrf=ALeKk01jlMEcOr-2Vd0ev6RaoZZSAqMADg:1589729471894&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjO9dfjm7vpAhV8yjgGHR-zDCoQ_AUoAXoECBMQAw&biw=1536&bih=763#imgrc=OzVmsuZIvusEJM',
            discription: 'This book steps beyond the simple functions of the Clapper, introducing you to a number of products that can be used for everything from controlling lighting levels, watering your lawn, closing your drapes, and managing sundry appliances in your home.',
        }
    ];

    return (
        <div>
            <Card_tabs book={Baba}/>
        </div>
    )
}

这是另一个组件,我在其中使用道具并在 {props.book.map}

处收到“无法读取未定义的属性‘地图’”的问题

const Card_tabs = (props) => {
   
       
            {props.book.map(user=>{
                return(<h1>{user.header}</h1>)
            })} 
       
    
}

【问题讨论】:

  • 假设我修复了 Card_tabs,该代码可以正常工作:codesandbox.io/s/keen-sun-ov1ft?file=/src/App.js(另外作为记录:我不认为链接的副本特别有用;显示的代码已损坏,但很明显 @ 987654324@ 永远不会未定义,因为它是一个数组 const)

标签: javascript reactjs react-props


【解决方案1】:
import ReactDOM from "react-dom";
import React from "react";

const App = () => {
  const Baba = [
    {
      id: "b1",
      header: "Book 1 Name",
      image:
        "https://www.google.com/search?q=engineering+books&rlz=1C1CHBF_enIN862IN862&sxsrf=ALeKk01jlMEcOr-2Vd0ev6RaoZZSAqMADg:1589729471894&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjO9dfjm7vpAhV8yjgGHR-zDCoQ_AUoAXoECBMQAw&biw=1536&bih=763#imgrc=OzVmsuZIvusEJM",
      discription:
        "This book steps beyond the simple functions of the Clapper, introducing you to a number of products that can be used for everything from controlling lighting levels, watering your lawn, closing your drapes, and managing sundry appliances in your home."
    }
  ];

  return (
    <div>
      <CardTabs book={Baba} />
    </div>
  );
};

const CardTabs = ({ book }) => {
  return book.map(user => {
    return <h1>{user.header}</h1>;
  });
};

ReactDOM.render(<App />, document.getElementById("root"));


【讨论】:

  • 为什么要投反对票。此代码绝对可以正常工作并解决错误
  • 我没有 dv。但我认为有人这样做是因为它只是代码。
  • 如果它解决了您的问题。请点赞并接受我的回答。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-10
  • 2021-11-15
  • 2022-06-13
  • 2021-11-14
  • 1970-01-01
  • 2019-06-15
相关资源
最近更新 更多