TypeError：books.map不是函数

Question

我正在创建一个React应用。 我有2个文件

1. AuthorQuiz.js
2. index.js

我有2个组成部分

1. AuthorQuiz
2. 打开

Turn组件嵌入在AuthorQuiz组件中，而AuthorQuiz是主要组件。

数据来自 index.js 作为传播运营商

AuthorQuiz.js

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


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

index.js

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

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

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

但是当我运行代码时，我得到一个错误

TypeError：books.map不是函数

Answer 1

您尚未对Turn组件中的道具进行破坏，这导致该组件对该道具的处理不正确

<input type="number" id="numberInput" placeholder="try entering text"/>
<button id="btn">Show value</button>