React新手求助：传递数组对象Props时遇map未定义错误

嘿，我来帮你搞定这个问题！你遇到的这个错误主要是因为Card_tabs组件存在两个关键问题，咱们一步步来修正：

问题分析 #

1. 组件未返回可渲染的JSX：你在Card_tabs里写了map逻辑，但没有把结果通过return语句返回给React，这会导致组件无法生成任何DOM元素，甚至会让React无法正确识别组件输出，间接引发未定义相关错误。
2. 缺少空值兜底处理：虽然当前你确实传递了Baba数组，但如果后续遇到异步加载数据、父组件暂时未传book props的情况，props.book就会变成undefined，此时调用map就会触发你看到的错误。

修正后的代码 #

方案1：基础修正版 #

const Card_tabs = (props) => { 
  // 给props.book设置空数组兜底，避免undefined时调用map报错
  const books = props.book || [];
  
  // 必须返回JSX内容
  return (
    <div>
      {books.map(bookItem => (
        // 给列表元素加key是React列表渲染的最佳实践，帮助React高效更新DOM
        <h1 key={bookItem.id}>{bookItem.header}</h1>
      ))}
    </div>
  )
}

方案2：解构赋值优化版 #

用ES6解构赋值让代码更简洁，直接在参数里给book设置默认空数组：

const Card_tabs = ({ book = [] }) => { 
  return (
    <div>
      {book.map(bookItem => (
        <h1 key={bookItem.id}>{bookItem.header}</h1>
      ))}
    </div>
  )
}

额外优化建议 #

你的CardsInformation组件里的数组命名Baba可以更语义化一点，比如改成books，这样其他开发者（包括未来的你）看代码时能立刻明白这个数组的用途，提升代码可读性：

const CardsInformation = () => { 
  const books = [ 
    { 
      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={books}/> 
    </div> 
  ) 
}

内容的提问来源于stack exchange，提问作者Nikhil B M