react异步获取数据、传值问题

Question

问题描述

没有用到 redux，该怎么传值呢，react生命周期，总是先要检查一下 render里面的数据，官方是不是把顺序写错了

问题出现的环境背景及自己尝试过哪些方法

判断、遍历

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
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="#949494"
                    tintColor="#33A3F4"
                    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>
    )
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

因为 react总是要先检查一遍 render，所以报错，未定义数据

另外，这网站是问问题，还是喷人的？
提问题都有人喷我

Answer 1

这种问题别总发错版块，不太理解和 JAVA 便签有啥关系

Answer 2

问题里面是找到了一个类似的，但是太模糊，不是很懂