problem description

if redux is not used, how to pass values? in the react life cycle, always check the data in render first. Is the official writing the order wrong

the environmental background of the problems and what methods you have tried

judge, traverse

related codes

/ / Please paste the code text below (do not replace the code with pictures)
import React, {Component} from "react"
import {TabBar} from" antd-mobile";
import SearchLayout from ".. / searchLayout/searchLayout";

export default class HomeLayout extends Component {

constructor(props) {
    super(props);
    this.state = {
        menu: ""
    }
}

componentDidMount() {
    fetch("m/api/menu/list.m", {
        headers: {
            "Authorization": localStorage.getItem("token")
        }
    }).then(res => res.json())
        .then(datas => {
            this.setState({menu: datas.data})
        })
}


render() {

    return (
        !this.state.menu? "login" :
        <RealHome originMenu={this.state.menu}/>)
    // )
}

}

class RealHome extends Component {

constructor(props) {
    super(props);
    this.state = {
        selectedTab: "blueTab",
        hidden: false,
        fullScreen: true,
        menu: []
    }
}

renderContent(div) {
    if (div == 1) {
        return <SearchLayout/>
    }
}

render() {
    // console.log(this.props.originMenu)
    this.state.menu = this.props.originMenu

    return (
        !this.props.originMenu ? "login" :
        <div>
            <h1>
                {/*{this.props.location.pathname}*/}
            </h1>


            <div style={this.state.fullScreen ? {
                position: "fixed",
                height: "100%",
                width: "100%",
                top: 0
            } : {height: 400}}>
                <TabBar
                    unselectedTintColor="-sharp949494"
                    tintColor="-sharp33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    {this.state.menu.map((menu, index) => {
                        return (
                            <TabBar.Item
                                title={menu.name}
                                key={index}
                                icon={<div style={{
                                    width: "22px",
                                    height: "22px",
                                    background: "url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat"
                                }}
                                />
                                }
                                selectedIcon={<div style={{
                                    width: "22px",
                                    height: "22px",
                                    background: "url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat"
                                }}
                                />
                                }
                                selected={this.state.selectedTab === "blueTab"}
                                badge={1}
                                onPress={() => {
                                    this.setState({
                                        selectedTab: "blueTab",
                                    });
                                }}
                                data-seed="logId"
                            >
                                {this.renderContent(menu.children[0].sort)}
                            </TabBar.Item>
                        )
                    })}
                </TabBar>
            </div>
        </div>
    )
}

}

what result do you expect? What is the error message actually seen?

because react always checks render first, an error is reported and no data is defined

by the way, does this site ask questions, or is it sensational?
people spray me when they ask questions