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

新手的问题,来自一个刚开始使用 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,我明白了。

enter image description here

这是否有什么关系如何 books 是宣布的吗?悬停在 books 在我的状态变量中,它显示为一个 string[]. 任何帮助解除这种情况将是非常感激的。

解决方案:

替换为:

function Turn(author, books) {

改为:

function Turn({ author, books }) {

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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

为相邻列值创建多个时间戳

2022-4-20 19:09:41

解决方案

在WebSocket握手过程中出错。意外的响应代码。在Minikube的Ingress上出现502

2022-4-20 20:00:08

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索