如何在 render() 之前解决 componentWillMount() 中的异步调用

Question

试图在调用render() 方法之前弄清楚如何在componentWillMount() 中调用异步函数。我有以下代码（为简单起见，已删除）：

interface State {
    foo?: AClass
}
export class BClass extends React.Component<Props, State>
{
    async componentWillMount(){
        await this.run();
    }
    async run(){
        let a = await bar();
        this.setState({foo: a});
    }
    render() {
        return (
            <View>
                <Text> {this.state.foo == null ? "null" : this.state.foo.getText()} </Text>
            </View>
        );
    }
}

我已经看到了一种潜在的解决方法，涉及将loading 变量添加到this.state，但这并没有多大作用。我也尝试过返回Promise，然后再做fooPromise.then((c)=>{this.setState({foo: a})});，但无济于事。

所有这些都想问，有没有办法可以在componentWillMount() 中调用黑盒异步方法并在运行render() 之前解析结果？

Answer 1

你可以让它在完成之前什么都不渲染：

export class BClass extends React.Component<Props, State>
{
    state = {
      loaded: false,
    }
    async componentWillMount(){
        await this.run();
    }
    async run(){
        let a = await bar();
        this.setState({ foo: a, loaded: true });
    }
    render() {
        return (
            <View>
                {this.state.loaded &&
                  <Text> {this.state.foo == null ? "null" : this.state.foo.getText()} </Text>
                }
            </View>
        );
    }
}