React开发AuthorQuiz应用遇TypeError: author is undefined错误求助

我来帮你定位并修复这个错误，问题出在AuthorQuiz组件接收props的方式上，具体原因和修复步骤如下：

错误根源 #

React组件的第一个参数是完整的props对象，而不是你直接传入的某个属性。在你的代码里：

• index.js中通过<AuthorQuiz {...state}/>把state对象展开传递，此时state里的turnData会成为AuthorQuiz组件props的一个属性（即props.turnData）
• 但你写的function AuthorQuiz(turnData)是把整个props对象当成了turnData，这就导致你传给Turn组件的{...turnData}其实是展开了props对象（里面并没有author和books），最终Turn组件拿不到正确的author参数，触发undefined错误。

修复方案 #

修改AuthorQuiz组件的参数写法，正确从props中解构出turnData：

修改后的AuthorQuiz.js代码

function Turn({ author, books }) { 
  return ( 
    <div className="row turn" style={{ backgroundColor: 'white' }}> 
      <div className="col-4 offset-1"> 
        <img src={author.imageUrl} className="authorImage" alt="Author" /> 
      </div> 
      <div className="col-6"> 
        {/* 给列表项添加key，避免React警告 */}
        {books.map((title, index) => <p key={index}>{title}</p>)} 
      </div> 
    </div>
  ); 
}

// 从props中解构出turnData属性
function AuthorQuiz({ turnData }) { 
  return ( 
    <div className="container-fluid"> 
      <Hero/> 
      <Turn {...turnData}/> 
      <Continue/> 
      <Footer/> 
    </div> 
  ); 
}

额外优化提示 #

在books.map的时候记得添加key属性（如上代码所示），这是React列表渲染的规范要求，能避免控制台出现不必要的警告。

内容的提问来源于stack exchange，提问作者rabar sdiq