在props中得到的问题是 "无法读取未定义的属性'map'" [重复] 。

Posted 2023-01-08

这个问题在这里已经有了答案:

如何处理在可能未定义的数据上调用函数？ (2个回答)

封闭 28天前.

我有得到的问题，当传递包含对象的数组作为道具从一个组件到另一个组件。你们能不能帮我解决这个问题。

下面是卡信息组件的代码，我在这里把值作为道具传递给你。

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处出现了 "无法读取未定义的属性'map'"的问题。

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

答案

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"));