Question

我有一个List组件，需要花费一些时间来加载。

我希望它显示一个微调框，直到它被加载和安装为止，但是很遗憾，我尝试的所有方法都无法正常工作。

我正在尝试做这样的事情：

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: false,
        };
    }

    componentDidMount() {
        this.setState({isReady: true});
    }

    render() {
        if(this.state.isReady){
            return (
                <Content>
                    {this.renderList()}
                </Content>
            );
        }
        else {
            return (
                <Spinner/>
            );
        }

    }

    renderList() {
        return this.props.data.map((item, index) => {
            return (
                <ListItem type={this.props.type} text={item} key={index}/>
            );
        });
    }
}

我做错了什么？

Answer 1

如果您不知道哪个先发生，则应该同时检查props.data和state.isReady：

    render() {
        if(this.state.isReady && this.props.data.length !== 0){
            return (
                <Content>
                    {this.renderList()}
                </Content>
            );
        }
        else {
            return (
                <Spinner/>
            );
        }

    }

Answer 2

我认为您应将isLoading中的true初始化为constructor，然后在false中将其设置为componentDidMount。

然后在render <Spinner />为isLoading的情况下尝试true

如何显示微调框，直到在React Native中安装了组件？

2 个答案: