Javascript 如何在reactjs和meteor中显示加载程序？

我有一个页面，其中列出了3个食谱以及更多按钮。单击“更多”按钮后，将列出更多3种食谱。我想做的是，在列出更多3个食谱之前，我想显示一个微调器/加载器图标，但我只能更改按钮的文本。我如何在点击更多按钮后以及在列出其他3个食谱之前显示加载器图标。我正在使用meteorjs和reactjs

我的代码是

export default class Home extends Component {
    constructor(){
        super();
        this.state = { limit:3 , loading:false }
        this.addMore = this.addMore.bind(this);
    }
    getMeteorData(){
        let data = {};
        data.recipes = [];
        data.recipes = Recipes.find({},{sort:{createdAt:-1}}).fetch();
        let recipeHandle = Meteor.subscribe('recipelist',this.state.limit);
        if(recipeHandle.ready()){
            data.recipes = Recipes.find({},{sort:{createdAt:-1},limit:this.state.limit}).fetch();
        }
        return data;
    }

    addMore(){
        this.setState({
                        limit:this.state.limit + 3, loading: true }, () => {
                        this.setTimeout(()=>{
                            this.setState({loading:false});
                        },2000);
                    });
    }
    render() {
        console.log('this.data.recipes',this.data.recipes);
        let recipes = _.map(this.data.recipes,(recipe) => {
            return <RecipeList key={recipe._id} recipe={recipe} loading={this.state.loading} />
        });
        return (
            <div className="row">
                <div className="intro blink z-depth-1">
                  <div className="row">
                    <div className="col l7">
                        <h1 className="heading flow-text blink">Sell your Recipe</h1>
                    </div>
                  </div>
                </div>
                <div className="row">
                    <div className="col s12">
                        {recipes}
                    </div>
                </div>
                <button onClick={this.addMore} type="button" className="btn coral more">More</button>
            </div>
        );
    }
}
ReactMixin(Home.prototype, ReactMeteorData);

导出默认类主扩展组件{
构造函数（）{
超级（）；
this.state={limit:3，loading:false}
this.addMore=this.addMore.bind（this）；
}
getMeteorData（）{
让数据={}；
data.recipes=[]；
data.recipes=recipes.find（{}，{sort:{createdAt:-1}}）.fetch（）；
让recipeHandle=Meteor.subscribe（'recipelist'，this.state.limit）；
if（recipeHandle.ready（））{
data.recipes=recipes.find（{}，{sort:{createdAt:-1}，limit:this.state.limit}）.fetch（）；
}
返回数据；
}
addMore（）{
这是我的国家({
limit:this.state.limit+3，加载：true}，（）=>{
此.setTimeout（（）=>{
this.setState（{loading:false}）；
},2000);
});
}
render（）{
log（'this.data.recipes'，this.data.recipes'）；
让recipes=\映射（this.data.recipes，（recipe）=>{
返回
});
返回(
出售你的食谱
{配方}
更多
);
}
}
ReactMixin（Home.prototype，ReactMeteorData）；

您可以删除加载状态，只需从数据计算加载状态：

{this.state.limit！==this.data.recipes.length&}

我不确定您想在哪里显示加载程序，但例如，您可以执行以下操作：

render() {
  console.log('this.data.recipes',this.data.recipes);
  let recipes = _.map(this.data.recipes,(recipe) => {
      return <RecipeList key={recipe._id} recipe={recipe} loading={this.state.loading} />
  });
  return (
      <div className="row">
          <div className="intro blink z-depth-1">
            <div className="row">
              <div className="col l7">
                  <h1 className="heading flow-text blink">Sell your Recipe</h1>
              </div>
            </div>
          </div>
          <div className="row">
              <div className="col s12">
                  {recipes}
              </div>
          </div>
          {this.state.limit !== this.data.recipes.length && <img src="path_to_loader.gif" />}
          <button onClick={this.addMore} type="button" className="btn coral more">More</button>
      </div>
  );
}

render（）{
log（'this.data.recipes'，this.data.recipes'）；
让recipes=\映射（this.data.recipes，（recipe）=>{
返回
});
返回(
出售你的食谱
{配方}
{this.state.limit！==this.data.recipes.length&&}
更多
);
}

在

getMeteorData（）

中，可以存储加载状态：

data.isLoading=！recipeHandle.ready（）谢谢你的知识。我明白了。我现在可以让它双向工作（一个是您的方式，另一个是@omerts）。我应该在哪里提供setTimeout，以便我可以在加载状态下再加载几秒钟？我认为您不需要setTimeout，第一次渲染将在setState上进行，您可以将状态更改为加载。Meteor加载更多数据后，另一个渲染应该会自动发生（根据我对Meteor的理解）。