Реагировать вызов функции внутри возврата, чтобы вставить компонент

Question

Я пытаюсь создать функцию в своем классе, чтобы избежать написания одного и того же кода несколько раз. В настоящее время у меня есть 3 книжные полки, и я должен написать один и тот же код между тегами Книжная полка 3 раза. Я хотел бы иметь возможность вызывать функцию, чтобы код выглядел более скудным. Это мой текущий код для 1 книжной полки, которая отлично работает:

class BookApp extends React.Component {
    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                **{this.state.allBooks.filter((book) => {
                return book.shelf === 'currentlyReading';
                }).map((b) => {
                return (
                    <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                    />
                )
                })}**
            </Bookshelf>
        </div>
        )
    }   
}

Я попытался добавить функцию, которая делает то же самое, и вызвать эту функцию внутри {}, но она не возвращает мои компоненты. Любая помощь очень ценится!

class BookApp extends React.Component {

    filterBooks(shelf) {
            this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}

Answer 1

просто поместите возврат перед «this.state.allBooks», но когда вы пишете «реакция» и идея «Компонентов в реакции», будет лучше, если вы переместите эту логику в компонент «Книжная полка».

class BookApp extends React.Component {

    filterBooks(shelf) {
            return this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}

Answer 2

Пожалуйста, проверьте код, который я редактирую. Просто верните коллекцию filterList из функции filterBooks.

class BookApp extends React.Component {

    filterBooks(shelf) {
           let filterList = this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
        return filterList;
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}