为什么反应会返回TypeError：无法正确读取未定义的'join'？

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: Cannot read properly 'join' of undefined"。我该怎么做才能解决这个问题？

Obs。 1：我没有输入完整的代码，但是如果您需要从一开始就看到它，请告诉我，我将编辑此帖子。

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