Question

在评估if else语句时，我无法插入定时加载程序。

我的目标是在评估语句payload.length > 0 ? (/*Do stuff*/) : (/*Do something else*/)的同时，将加载器渲染几秒钟。感谢您提供任何反馈意见。

这是我要添加几秒钟的装载程序

        <LoaderContainer>
            <RingLoader size={100} />
        </LoaderContainer>

这是我的代码

return payload.length > 0 ? (
            <Container>
                <FilterBarContainer>
                    <FilterBar onChangeValue={onChangeValue}/>
                </FilterBarContainer>
                <FilterContainer>
                    {tabData.map(/* Displays tabs */)}
                </FilterContainer>
                {finalData.length === 0 ? (
                    <EmptyTabContainer>
                        <p>/* Empty Tab */</p>
                    </EmptyTabContainer>
                ) : (
                    finalData.map(
                        payload => (/* Displays payload info */),
                    )
                )}
            </Container>
        ) :(
            <EmptyPageContainer>
                <FontAwesomeIcon icon="ticket-alt" className="icon" />
                <p>/* This user has no tickets */</p>
            </EmptyPageContainer>
        );

Answer 1

在渲染方法中，添加以下代码：

public  class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后，当您定义状态时，需要指定render(){ if(this.state.loading){ return ( <LoaderContainer> <RingLoader size={100} /> </LoaderContainer> ); } return( // The rest of your code. );：

state.loading: true

只要您准备卸下装载程序，只需使用：

state = {
   loading: true
}

为什么？

请记住，React中的每个状态更改都会导致this.setState({ loading: false });方法再次执行。这将导致当您将render的状态更新为loading时，除非您将false的状态重新设置为loading，否则将不再呈现正在加载的组件。

注意： 剩下的唯一事情就是实现将true的状态设置为{时要呈现的内容{1}}。

编辑：

要仅在特定（但特定）时间内渲染加载器，可以在loading方法中使用false：

setTimeout

我真的不建议这样做，但是如果您不使用异步函数来获取数据或其他任何东西，那么使用componentDidMount来模拟页面加载似乎很好。

在评估if else语句时添加加载程序

1 个答案:

为什么？

编辑：