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

Posted 2023-02-22

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

【英文标题】：unable to render lists of data while using class based component in both parent and child in reactjs

【发布时间】：2019-10-02 15:39:50

【问题描述】：

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

当我尝试 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 编程

【问题讨论】：

您似乎忘记在renderedLists() 中实际返回计算数组。

【参考方案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>
    );