TypeError .map()不是一个函数。

Posted 2021-03-19

新手的问题，来自一个刚开始使用 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[]. 任何帮助解除这种情况将是非常感激的。

答案

替换为：

function Turn(author, books) {

改为：

function Turn({ author, books }) {

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