Question

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

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

我已经检查了this documentation from React

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

Answer 1

不要忘记key，然后打开开发控制台！

returnBookComponent = array => {
    return array.map((item, index) => {
        return (
            <li key={index}>
                <Book
                    title={item.title}
                    authors={item.authors}
                    image={item.imageLinks.thumbnail}
                />
            </li>
        )
    })
}

Answer 2

我认为您不需要returnBookComponent处理函数，而您的组件应该看起来像

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

    class BookShelf extends Component {

        render () {
            const currentBook = this.props.currentlyReading.map((item) => {
                return (
                    <li>
                        <Book
                            title={item.title}
                            authors={item.authors}
                            image={item.imageLinks.thumbnail}
                        />
                    </li>
                )
            });

            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

这应该有效。

Answer 3

好的，这对我来说是一种好奇，但是我能够解决此问题。

我有一个父组件正在解析提取，一旦解析，它将更新currentReading的状态。在此父组件render的功能中，我正在将Reading传递给BookShelf组件，而无需检查诺言。

我有这个：

        <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数组，包含两个元素，长度为0？

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

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

3 个答案: