javascript - 为什么 React 返回 TypeError : Cannot read properly 'join' of undefined?

Question

我需要显示书籍列表以及下面的作者姓名。

如果有多个作者，我需要分隔他们的名字，并且我正在尝试使用 .join()。

下面没有 .join() 的代码部分:

<select
  onChange={(event) => this.props.changeShelf(
   this.props.book, event.target.value
  )}
  value={this.props.actualShelf}
>
  <option value='move' disabled>Move to...</option>
  <option value='currentlyReading'>Currently Reading</option>
  <option value='wantToRead'>Want to Read</option>
  <option value='read'>Read</option>
  <option value='none'>None</option>
</select>
</div>
  </div>
    <div className='book-title'>{this.props.book.title}</div>
    <div className='book-authors'>{this.props.book.authors}</div>                  
  </div>            
);

接下来是 .join() 的代码:

<select
  onChange={(event) => this.props.changeShelf(
   this.props.book, event.target.value
  )}
  value={this.props.actualShelf}
>
  <option value='move' disabled>Move to...</option>
  <option value='currentlyReading'>Currently Reading</option>
  <option value='wantToRead'>Want to Read</option>
  <option value='read'>Read</option>
  <option value='none'>None</option>
</select>
</div>
  </div>
    <div className='book-title'>{this.props.book.title}</div>
    <div className='book-authors'>{this.props.book.authors.join(', ')}</div>                  
  </div>            
);

我的问题是，如果我不使用 .join()，页面运行良好，但是当我插入 .join() 时，页面最初可以运行，但是当我进入搜索页面并尝试查找时一本书，我收到以下错误:“TypeError:无法正确读取未定义的'join'”。我可以做什么来解决这个问题？

观察。 1:我没有放置完整的代码，但如果您需要从头开始查看它，请告诉我，我将编辑这篇文章。

观察。 2:该组件不是无状态组件，而是类组件，因此如果您需要此处显示整个组件，请告诉我。

Answer 1

这是 JS native 抛出错误，只是因为有一个 undefined 对象

{this.props.book.authors && this.props.book.authors.join(', ')}

也许您遇到过一本书没有作者的情况？