TypeError .map（）不是函数

Question

这里的新手提问来自React入门人员。

我有一个function可以传递两个道具：

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"></img>
      </div>
      <div className="col-6">
        {books.map((title) => <p>{title}</p>)}
      </div>
    </div>);
}

在同一文件夹中的单独JS文件中，我具有以下内容：

const authors = [
  {
    name: 'Mark Twain',
    imageUrl: 'images/authors/marktwain.jpg',
    imageSource: 'Wikimedia Commons',
    books: ['The Adventures of Huckleberry Finn']
  }
];

const state = {
  turnData: {
    author: authors[0],
    books: authors[0].books
  }
};

ReactDOM.render(
  <React.StrictMode>
    <AuthorQuiz {...state} />
  </React.StrictMode>,
  document.getElementById('root')
);

Turn作为AuthorQuiz函数的一部分呈现，传递turnData状态作为道具，如下所示：

function AuthorQuiz({turnData}) {
  return (
    <div className="container-fluid">
      <Hero/>
      <Turn {...turnData}/>
      <Continue/>
      <Footer />
    </div>
  );
}

然后在localhost上运行它，我得到：

这与books的声明方式有关吗？将鼠标悬停在我的状态变量中的books上会显示为string[]。解除这种情况的任何帮助将不胜感激。

Answer 1

替换：

function Turn(author, books) {

使用

function Turn({ author, books }) {

这是一个道具对象，不是单独的参数。