Question

export class Dashboard extends React.Component<DashboardProps, IMonthlyCommission>{

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

    componentWillMount() {
        request.get("AffiliateCommissionStatement/GetCommissionDetails").send().end((err, res) => {
            var data: IMonthlyCommission = res.body.Commissions;
            this.setState(data);
        });
    }

    render() { 
       return <div>{this.state[0]}</div> ;
    }
}

在内部渲染中，this.state[0]为空，因为componentWillMount中的ajax调用是ASYNC。

如何在render和ajax end函数之间创建依赖关系。所以这样我就不会得到null异常/

由于

Answer 1

您可以让渲染方法处理尚未存在数据的情况：

render() {
  if (!this.state.data) 
    return <div>Loading...<div>

  return <div>{this.state.data[0]}</div>
}

ReactJS在componentWillMount和render函数之间竞争

1 个答案: