React - 问题渲染组件嵌套在一个函数中

Question

我是 React / JS / 编码的超级新手。我正在构建一个页面，根据阅读状态将书籍放在书架上。所以一个架子放当前正在阅读的书，第二个架子放我想读的书，等等

目前，唯一正在渲染的是货架的名称。出于某种原因，shelf 函数的 return() 中的代码不会呈现。代码确实得到执行，直到那一点。当我 console.log(book.author) 我确实得到了我想要的东西，但是在 return(<p>{book.author}</p> 之内它没有被渲染。

知道为什么会这样吗？

非常感谢您的帮助！

import React from 'react';
import Book from './Book'

const shelf = (props, chosenStatus) => {
    props.books.filter(book => book.status === chosenStatus).map( book => { 
        console.log(book.author);
        return(
            <div>
                <p>{book.author}</p>
                <Book 
                    author = {book.author}
                    title = {book.title}
                    status = {book.status}
                />
            </div>
            
        )
    })   
} 

const shelves = (props) => {
    return(
        <div>
            <h1>Reading</h1>
            {shelf(props, 'Reading')}
            <h1>Wanna read</h1>
            {shelf(props, 'Wanna read')}
            <h1>Read</h1>
            {shelf(props, 'Read')}
        </div>
    );
}

 export default shelves

Answer 1

import React from 'react';
import Book from './Book'

const shelf = (props, chosenStatus) => {
    // Add a return here
    return props.books.filter(book => book.status === chosenStatus).map( book => { 
        console.log(book.author);
        return(
            <div>
                <p>{book.author}</p>
                <Book 
                    author = {book.author}
                    title = {book.title}
                    status = {book.status}
                />
            </div>
            
        )
    })   
} 

const shelves = (props) => {
    return(
        <div>
            <h1>Reading</h1>
            {shelf(props, 'Reading')}
            <h1>Wanna read</h1>
            {shelf(props, 'Wanna read')}
            <h1>Read</h1>
            {shelf(props, 'Read')}
        </div>
    );
}

 export default shelves

Answer 2

shelf 代码不呈现的原因是因为您没有 return 在 shelf 函数中过滤 react jsx 的数组。只需将 {} 替换为 () 括号即可。

import React from 'react';
import Book from './Book'

const shelf = (props, chosenStatus) => (
    props.books.filter(book => book.status === chosenStatus).map( book => { 
        console.log(book.author);
        return(
            <div>
                <p>{book.author}</p>
                <Book 
                    author = {book.author}
                    title = {book.title}
                    status = {book.status}
                />
            </div>
            
        )
    })   
) 

const shelves = (props) => {
    return(
        <div>
            <h1>Reading</h1>
            {shelf(props, 'Reading')}
            <h1>Wanna read</h1>
            {shelf(props, 'Wanna read')}
            <h1>Read</h1>
            {shelf(props, 'Read')}
        </div>
    );
}

 export default shelves

React - 问题渲染组件嵌套在一个函数中

React - Issue rendering component nested within a function

rendering

reactjs