时间戳

首页 > 解决方案 > 在迭代时返回一个新的 React 组件

reactjs - 在迭代时返回一个新的 React 组件

问题描述

我已经寻找过这个问题，发现最常见的问题是人们没有返回任何东西，但是，我在我的代码中没有看到任何问题，也不明白为什么不起作用。你能帮我一把吗？

import React, { Component } from 'react'
import Book from './Book'

class BookShelf extends Component {
    returnBookComponent(array) {
        return array.map((item) => {
            return (
                <li>
                    <Book
                        title={item.title}
                        authors={item.authors}
                        image={item.imageLinks.thumbnail}
                    />
                </li>
            )
        })
    }

    render () {
        const currentlyReading = this.props.currentlyReading
        return (
            <div className="bookshelf">
                <h2 className="bookshelf-title">{this.props.title}</h2>
                <div className="bookshelf-books">
                    <ol className="books-grid">
                        {this.returnBookComponent(currentlyReading)}
                    </ol>
                </div>
            </div>

        )
    }
}

export default BookShelf

我已经从 React 检查了这个文档

编辑：如果我在此行之后添加一个 console.log： return array.map((item) => {它永远不会被执行。有人 array.map 没有迭代数组，即使它有 2 个元素。如果发送array到控制台，那么它会打印 2 个元素，但不知何故，我无法在该对象上运行任何类似数组的函数。typeof arraythrows Array，array.length当我可以在开发工具中确认它有 2 个元素时显示 0。怎么了？

标签： reactjsjsx

解决方案

好吧，这对我来说是一种古玩，但我能够解决这个问题。

我有一个父组件正在解析获取，一旦解决，它就会更新 currentReading 的状态。在这个父组件渲染的函数中，我将 currentReading 传递给这个 BookShelf 组件，而不检查 promise。

我有这个：

        <Route exact path="/" render={() => (
                <MainPage
                    currentlyReading={this.state.currentlyReading}
                    wantToRead={this.state.wantToRead}
                    read={this.state.read}
                />
        )}/>

结果console.log(this.state.currentlyReading)是

⯈[]

Array具有 2 个元素的类型。

现在，在检查承诺已解决之后

     {this.state.mounted &&
          <Route exact path="/" render={() => (
                <MainPage
                    currentlyReading={this.state.currentlyReading}
                    wantToRead={this.state.wantToRead}
                    read={this.state.read}
                />
          )}/> 
     }

这是的输出console.log(this.state.currentlyReading)

⯈(2) [{…}, {…}]

那么，我可以问你为什么这到底⯈[ ]是一个有效的 Javascript 数组，有 2 个元素和长度0？

我是 javascript 的新手，但这结果有点疯狂。

推荐阅读