React项目选中书籍在新品页显示、控制台book未定义报错如何解决

问题1：选中书籍在新品到货页异常展示修复 #

出现原因：<BookDetails> 组件被放置在所有路由规则的公共渲染区域，未和首页路由绑定，只要 selectedBook 不为空，任意路由页面都会渲染该组件。
修复方式：将 <BookDetails> 迁移到首页专属的路由渲染逻辑内，修改主组件的路由部分代码如下：

<div>
  <Route path="/" exact render={()=> (
    <>
      <ComponentList
        books={this.state.books}
        selectedBookHandler={this.selectedBookHandler}
      />
      <BookDetails book={this.state.selectedBook}/>
    </>
  )} />
  <Route path="/new" exact component={NewBook}/>
  <Route path="/about-us" exact component={About}/>
</div>

调整后只有匹配到首页路由时，才会渲染书籍列表和选中的书籍详情，其他路由页面不会再展示选中书籍内容。

问题2："Result showing book is not defined"错误修复 #

出现原因：ComponentList 组件遍历书籍列表时，点击事件给 selectedBookHandler 传参错误，你传入的是引入的 Book 组件对象，不是当前遍历到的书籍数据 item，后续变量取值不匹配就会抛出未定义错误。
修复方式：修改 ComponentList 内 Book 组件的事件绑定参数：

<Book
  bookName={item.bookName}
  writer={item.writer}
  publish={item.publish}
  key={item.id}
  selectedBookHandler={()=>props.selectedBookHandler(item)}
/>

修改后 selectedBook 存储的就是正确的书籍数据对象，后续取值逻辑不会再出现未定义错误。

内容的提问来源于stack exchange，提问作者Bachan Kubi