嵌套函数调用中的react组件呈现乱序

Question

我是新来的人，在下面的代码中渲染混乱。在UI上渲染之前，你们可以帮忙解决这个问题吗？

但是

console.log（）语句以正确的顺序登录。

我读到React组件是并行渲染的，是否因为这个原因发生了？

import React, {ReactNode} from 'react';
import Column from '@meridian/components/column';
import {isListNonEmpty} from 'src/utils/object-utils';
import ExperimentPanel from 'src/components/experiments/ExperimentPanelContainer';
import {Experiment} from "src/services/abe-horizonte/model/backend-interface/experiments-models";
import Table, {TableCell, TableRow} from "@meridian/components/table";

export interface ListExperimentsStateProps {
    userName: string;
    experimentList: Experiment[];
}

export interface ListExperimentsDispatchProps {
    fetchExperiments: () => void;
}

type Props = ListExperimentsStateProps & ListExperimentsDispatchProps;

export default class ExperimentPanelList extends React.Component<Props> {
    constructor(props: Props) {
        super(props);
        this.props.fetchExperiments();
    }

    private renderExperimentPanelList(experimentList: Experiment[]): ReactNode {
        console.log("heyo3")
        return experimentList.map((experiment: Experiment) =>
            <ExperimentPanel
                experimentName={experiment.experimentName}
                creator={experiment.creator}
                team={experiment.team}
                experimentDetails={experiment.description}
                creationDate={experiment.creationDate}
            />)
    }

    private renderExperimentList(experimentList: Experiment[]) {
        console.log("heyo2")
        if (isListNonEmpty(experimentList)) {
            return (
                <Table headerRows={1} spacing="small" showStripes={true} showDividers={true}>
                <TableRow>
                    <TableCell>Experiment name</TableCell>
                    <TableCell>Experiment details SIM</TableCell>
                    <TableCell>Creator</TableCell>
                    <TableCell>Team</TableCell>
                    <TableCell>Creation date</TableCell>
                    <TableCell>Actions</TableCell>
                    { console.log("heyo4")}
                </TableRow>
                    { console.log("heyo5")}
                {this.renderExperimentPanelList(experimentList)}
                </Table>)
        } else {
            return <div>No experiment found for the searched parameters</div>
        }
    }

    render() {
        return (
            <Column spacing="medium">
                heyo
                {this.renderExperimentList(this.props.experimentList)}
            </Column>
        );
    }
}