Question

我有一个函数，用于检查页面加载是否有结果，是否有结果，然后映射数组并返回一个组件，如果没有，则返回一个字符串，说明没有结果。目前，我已经能够编写函数，没有任何问题，但是似乎无法加载return语句。我是按照正确的方式返回组件还是有更好的方法？

控制台日志返回正确的信息，但是return()中的所有内容均未显示在视图中。

export default class BlogKanbanLayout extends React.Component {

    constructor(props) {
        super(props);
        this.resultsCheck = this.resultsCheck.bind(this);
    }

    resultsCheck(blogs, user) {
        console.log("resultsCheck")
        console.log(blogs)
        console.log(blogs.length)

        if(blogs.length === 0) {
            <p>There are no results for your filter criteria.</p>
        } else {
            console.log("There are blog results")
            console.log(blogs)
            console.log(user)
                blogs.map((blog, index) => {
                    console.log("blog map")
                    console.log(blog)
                    return (
                        <div className="row">
                            <p>This is a test></p>
                            <BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
                        </div>
                    )
                })
        }
    }

    render() {
        return (
            <div className="col-md-12">
                {this.resultsCheck(this.props.negativeBlogs, this.props.user)}
            </div>
        )
    }
}

Answer 1

在您的resultsCheck中，您忘记了返回映射结果。
另外，需要将map函数中使用的键提供给父元素，这里是您的div。使用条件渲染，您可以将整个组件简化为以下代码，以得到完全相同的结果：

export default class BlogKanbanLayout extends React.Component {
    render() {
        const { negativeBlogs, user } = this.props
        return (
            <div className="col-md-12">
                {negativeBlogs.length ?
                    negativeBlogs.map(blog => 
                        <div className="row" key={blog.blogIdHash}>
                            <p>This is a test></p>
                            <BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
                        </div>
                    )
                    :
                    <p>There are no results for your filter criteria.</p>
                }
            </div>
        )
    }
}

由于您没有使用组件的状态，您甚至可以将其优化为无状态的组件：

const BlogKanbanLayout = ({ negativeBlogs, user }) =>
    <div className="col-md-12">
        {negativeBlogs.length ?
            negativeBlogs.map(blog => 
                <div className="row" key={blog.blogIdHash}>
                    <p>This is a test></p>
                    <BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
                </div>
            )
            :
            <p>There are no results for your filter criteria.</p>
        }
    </div>

Answer 2

您的resultsCheck方法需要返回某些内容，因此您需要在两个结果之前添加return语句

    resultsCheck(blogs, user) {
        console.log("resultsCheck")
        console.log(blogs)
        console.log(blogs.length)

        if(blogs.length === 0) {
            return <p>There are no results for your filter criteria.</p>
        } else {
            console.log("There are blog results")
            console.log(blogs)
            console.log(user)
            return blogs.map((blog, index) => {
                    console.log("blog map")
                    console.log(blog)
                    return (
                        <div className="row">
                            <p>This is a test></p>
                            <BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
                        </div>
                    )
                })
        }
    }

渲染参数化功能结果

2 个答案: