Question

我有一个加载指示器，我想在页面加载时出现，但一旦安装组件就会消失。首先，我尝试使用this.setState(isLoading: false);中的componentDidMount(){}删除指标，但是发出了警告。相反，我把它放在componentWillUnmount(){}中使指示器可见，但一旦我的组件加载永远不会消失。我把国家设置在错误的地方吗？有没有更好的路线？

我基本上希望在<LoadingIndicator/>出现后隐藏<BlogFeed/>。

class BlogFeedContainer extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || {blogs: [], isLoading: true};
    }

    fetchList() {
....
}

componentWillUnmount(){
        this.setState(isLoading: false);
    }

    componentDidMount() {
        this.fetchList();
    }

    render() {
        return (
            <div className="container">
                <LoadingIndicator loading={this.state.isLoading} />
                <BlogFeed {...this.state} />
            </div>
        )
    }

//Loading Indicator
const LoadingIndicator = props => {
    if(props.loading){
        return (
            <div class="spinner">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
              <p>Loading...</p>
            </div>
        )
    } else {
        return;
    }
}

Answer 1

this.setState(isLoading: false);无效的JavaScript。请改用functional setState：

this.setState(() => ({ isLoading: false }));

ReactJS - 加载指标不消失

1 个答案: