在创建组件之前等待道具(而不是渲染)

时间:2018-11-14 09:45:04

标签: reactjs ag-grid

在创建我的应用程序的任何组件之前,我必须调用个人终结点来接收用户数据(例如,关于他是否是管理员的信息)。

我现在有这样的东西:

export default class Recrutement extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        // some data
      };
    }
    
    // A lot of functions
    
    columnDefs = [{
            //A lot of variable
            width: ((this.props.user === null) ? 50 : ((this.props.user.columnDefinitions.find(function (v) { return v.colId === 0 }) || {}).size)),
            //some functions
        },
        {
            //A lot of variable
            width: ((this.props.user === null) ? 50 : ((this.props.user.columnDefinitions.find(function (v) { return v.colId === 1 }) || {}).size)),
            //some functions
        }]
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            api: new ApiService(),
            user: null
        };
    }

    componentWillMount() {
        this.getUser();
    }

    getUser = async () => {
        let getUserInfo = (json) => {
            this.setState({
                api: this.state.api,
                user: json
            });
        };
        if (this.state.api.isLoggedIn()) this.state.api.getUserInfo(getUserInfo);
        else this.setState(this.state);
    }
    

    render() {
        if (this.state.api.isLoggedIn()) {
            return (
                <div className="mainApp">
                    <Recrutement user={this.state.user} />
                </div>
        )}
        else
        return (
            <div>
                <Login connexion={this.getUser} />
            </div>
        );
    }
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app" />

如您所见,我正在使用道具在数组(ag-grid列定义)上设置一些数据。或者此数组在render()之前初始化。 我的目标是在初始化所有内容之前让prop.user准备好(而不是null)。

有人知道怎么做吗?

0 个答案:

没有答案