Reactjs 反应选择：如何显示'；加载…'；加载选项时

我正尝试对我的WordPress块组件使用“React Select”来选择帖子类别。
我想要的是在加载类别时显示“加载…”，然后在加载完成时显示类别列表或“未找到类别”。
使用“我的代码”，它在加载时显示“未找到类别”，然后显示类别列表

export default class Categories extends Component {
    constructor() {
        super( ...arguments );
        this.state = {cats: []};
    }
    componentDidMount () {
        return apiFetch({path: '/myoriginal-blocks/v1/categories'})
        .then(data => {
            this.setState({cats:data});
        })
    }
    onChangeCategories = newCategories => {
        this.props.setAttributes({ category: newCategories == null ? [] : newCategories });
    }
    render() {
        const { attributes } = this.props;
        const { category } = attributes;
        return (
            <>
                <div>
                    <label>Categories</label>
                    <Select
                        isMulti
                        isClearable
                        placeholder='Search categories...'
                        onChange={ this.onChangeCategories }
                        options={ this.state.cats }
                        value={ category && category }
                        noOptionsMessage={() => 'No Categories Found'}
                    />
                </div>
            </>
        );
    }
}

导出默认类类别扩展组件{
构造函数（）{
超级（…参数）；
this.state={cats:[]}；
}
组件安装（）{
返回apiFetch（{path:'/myoriginal blocks/v1/categories'}）
。然后（数据=>{
this.setState（{cats:data}）；
})
}
onChangeCategories=newCategories=>{
this.props.setAttributes（{category:newCategories==null？[]：newCategories}）；
}
render（）{
const{attributes}=this.props；
常量{category}=属性；
返回(
类别
“未找到类别”}
/>
);
}
}

或者我不得不使用“异步选择”而不是“反应选择”，但我不能很好地理解它的文档。

---

希望有人能帮助我。谢谢。

您可以通过在您的状态中创建一个保存加载状态的变量来实现这一点。然后，在获取数据之前设置此状态变量，并在获取数据后再次设置它。最后，只需使用它在呈现方法中呈现不同的消息

导出默认类类别扩展组件{
构造函数（）{
超级（…参数）；
此.state={
猫：[]，
isLoading:false//创建新的状态变量以加载
};
}
componentDidMount（）{
this.setState（（prevState）=>({
…国家，
孤岛加载：正确
}));
返回apiFetch（{path://myoriginal blocks/v1/categories}）(
（数据）=>{
this.setState（{cats:data，isLoading:false}）；
}
);
}
onChangeCategories=（newCategories）=>{
this.props.setAttributes({
类别：newCategories==null？[]：newCategories
});
};
render（）{
const{isLoading}=this.state；
const{attributes}=this.props；
常量{category}=属性；
返回(
{孤岛加载(
加载。。。
) : (
类别
“未找到类别”}
/>
)}
);
}
}

您可以通过在您的状态中创建一个变量来实现这一点，该变量将保存加载状态。然后，在获取数据之前设置此状态变量，并在获取数据后再次设置它。最后，只需使用它在呈现方法中呈现不同的消息

导出默认类类别扩展组件{
构造函数（）{
超级（…参数）；
此.state={
猫：[]，
isLoading:false//创建新的状态变量以加载
};
}
componentDidMount（）{
this.setState（（prevState）=>({
…国家，
孤岛加载：正确
}));
返回apiFetch（{path://myoriginal blocks/v1/categories}）(
（数据）=>{
this.setState（{cats:data，isLoading:false}）；
}
);
}
onChangeCategories=（newCategories）=>{
this.props.setAttributes({
类别：newCategories==null？[]：newCategories
});
};
render（）{
const{isLoading}=this.state；
const{attributes}=this.props；
常量{category}=属性；
返回(
{孤岛加载(
加载。。。
) : (
类别
“未找到类别”}
/>
)}
);
}
}

您可以

卸载反应选择组件的属性

在您的状态中添加属性以管理加载

this.state = {cats: [], isLoading: true};

然后将isLoading设置为false

return apiFetch({ path: "/myoriginal-blocks/v1/categories" }).then(
      (data) => {
        this.setState({ cats: data, isLoading: false });
      }
    );

并在“选择组件”中传递isLoading道具

<Select
    isMulti
    isClearable
    placeholder='Search categories...'
    onChange={ this.onChangeCategories }
    options={ this.state.cats }
    value={ category && category }
    noOptionsMessage={() => 'No Categories Found'}
    isLoading={this.state.isLoading}
/>

“未找到类别”}
isLoading={this.state.isLoading}
/>
您可以
卸载反应选择组件的属性

在您的状态中添加属性以管理加载

this.state = {cats: [], isLoading: true};

然后将isLoading设置为false

return apiFetch({ path: "/myoriginal-blocks/v1/categories" }).then(
      (data) => {
        this.setState({ cats: data, isLoading: false });
      }
    );

并在“选择组件”中传递isLoading道具

<Select
    isMulti
    isClearable
    placeholder='Search categories...'
    onChange={ this.onChangeCategories }
    options={ this.state.cats }
    value={ category && category }
    noOptionsMessage={() => 'No Categories Found'}
    isLoading={this.state.isLoading}
/>

“未找到类别”}
isLoading={this.state.isLoading}
/>
太棒了！！！这很有魅力。非常感谢你的帮助！好极了这很有魅力。非常感谢你的帮助！你的代码运行得很好。非常感谢你的帮助！很高兴听到你这么说，也很乐意帮忙！你的代码运行得很好。非常感谢你的帮助！很高兴听到你这么说，也很乐意帮忙！