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

DAC4代码未呈现的原因是，您没有在shelf函数中返回已过滤的react jsx数组。只需将{}替换为（）括号。

shelf

React-嵌套在函数中的问题呈现组件

2 个答案: