在reactjs中使用基于类的组件时无法呈现数据列表

Question

我正在尝试获取从父组件到子组件的数据列表以显示它但无法做到

当我尝试 console.log 显示数据但无法返回 div 并将其呈现到屏幕上的 sub 时

import React from 'react';

class RenderSub extends React.Component {


    renderedLists = () => {

        this.props.lists.subjects[this.props.lists.sem].map(sub => {
            console.log(sub);
            return (
                <div key={Math.random()}>
                    {sub}
                </div>
            );
        });
    } 

    render() {

        if(this.props.lists.sem === "") {
            return <div></div>;
        }
        return (
            <div>
                {this.renderedLists()}

            </div>
        );
    }

}   

export default RenderSub;

算法设计与分析

计算机架构与组织

数据库管理系统

基于微处理器和微控制器的系统

概率和统计

RDBMS 实验室

微处理器和微控制器实验室

Java 编程

Answer 1

你需要在renderedLists中返回数组

renderedLists = () => {
    return this.props.lists.subjects[this.props.lists.sem].map(sub => {
        console.log(sub);
        return (
            <div key={Math.random()}>
                {sub}
            </div>
        );
    });
} 

render() {
    if(this.props.lists.sem === "") {
        return <div></div>;
    }
    return (
        <div>
            {this.renderedLists()}
        </div>
    );
}