Javascript 在我的React组件通过AJAX抓取时显示加载微调器/gif的最佳方法？

假设我有一个非常简单的React组件，它显示了存储在

this.state.myList

中的元素列表（参见下面的示例）

点击底部的“刷新”按钮会导致响应查询后端服务器并检索更新后的列表，然后显示该列表。该清单的实际内容或实施与此无关

var Foo = React.createClass({
  handleButtonClick: function() {
    return $.ajax({
      type: "POST",
      url: "/some/refresh/url",
      data: JSON.stringify({}),
      dataType: "json",
      contentType: "application/json",
      success: (function(response){
        self.setState({ myList: response.list });
      })
    });
  },

  render: function() {
    return (
      <div className="container">
        <ul>
          {
            this.state.myList.map(function(item) {
              return <li id="{item.id}">{item.name}</li>
            });
          }
        </ul>

        <input type="submit" value="REFRESH LIST" onClick={this.handleButtonClick} />
      </div>
    );
  }
});

var Foo=React.createClass({
handleButtonClick:function（）{
返回$.ajax({
类型：“POST”，
url:“/some/refresh/url”，
数据：JSON.stringify（{}），
数据类型：“json”，
contentType:“应用程序/json”，
成功：（功能（响应）{
self.setState（{myList:response.list}）；
})
});
},
render:function（）{
返回(

{
this.state.myList.map（函数（项）{
return
{item.name}
});
}

);
}
});

假设AJAX调用（无论出于何种原因）需要几秒钟。同时，我想展示一个标准的“加载”或“旋转”gif，让用户知道它正在工作

在这里最好的方法是什么

• 就在AJAX调用之前，我可以手动更新DOM并插入一个微调器gif，但这似乎不是“反应方式”。另外，我不知道这会对react维护的ReactDOM产生什么影响

• 我可以跟踪

  isLoading

  的状态，如果正在加载，则显示微调器而不是列表。但是我需要它来

  render（）

  一些东西，然后立即启动对AJAX操作的另一个调用

谢谢你的帮助

---

谢谢

React模型是围绕UI作为状态表示构建的。这意味着您应该将状态建模为“什么是必需的数据”，而

render（）

的返回值正是显示该数据的方式

在您的情况下，您应该跟踪

isLoading

，并在

render（）

中根据状态中的值有条件地显示微调器

var Foo = React.createClass({
  getInitialState: function() {
    return {isLoading: false};
  },
  handleButtonClick: function() {
    this.setState({ isLoading: true });
    return $.ajax({
      type: "POST",
      url: "/some/refresh/url",
      data: JSON.stringify({}),
      dataType: "json",
      contentType: "application/json",
      success: (function(response){
        self.setState({ myList: response.list, isLoading: false });
      })
    });
  },

  render: function() {
    return (
      <div className="container">
        <ul>
          {
            this.state.myList.map(function(item) {
              return <li id="{item.id}">{item.name}</li>
            });
          }
        </ul>

        {this.state.isLoading && <Spinner />}

        <input type="submit" value="REFRESH LIST" onClick={this.handleButtonClick} />
      </div>
    );
  }
});

var Foo=React.createClass({
getInitialState:函数（）{
返回{isLoading:false}；
},
handleButtonClick:function（）{
this.setState（{isLoading:true}）；
返回$.ajax({
类型：“POST”，
url:“/some/refresh/url”，
数据：JSON.stringify（{}），
数据类型：“json”，
contentType:“应用程序/json”，
成功：（功能（响应）{
self.setState（{myList:response.list，isload:false}）；
})
});
},
render:function（）{
返回(

{
this.state.myList.map（函数（项）{
return
{item.name}
});
}

{this.state.isLoading&&}
);
}
});

我通常解决这个问题的方法是让组件在其状态下跟踪

fetchInProgress

在进行提取之前，请将此值设置为

true

；提取完成后（成功或失败），您可以将该值设置回

false

组件的

render

方法将使用此标志；如果标志为

true

，则会呈现微调器而不是数据集

var Foo = React.createClass({
    handleButtonClick: function() {

        // before making call, set fetch flag
        self.setState({ fetchInProgress: true });

        return $.ajax({
            type: "POST",
            url: "/some/refresh/url",
            data: JSON.stringify({}),
            dataType: "json",
            contentType: "application/json",
            success: (function(response) {
                // when updating with dataset, also reset fetch flag
                self.setState({
                    fetchInProgress: false,
                    myList: response.list
                });
            }),
            failure: ((function(reason) {
                // make sure to reset even if fetch fails!
                self.setState({
                    fetchInProgress: false
                });
            })
        });
    },

    render: function() {
        return (
            <div className="container">
                <ul>
                    {
                        this.state.fetchInProgress
                            : <Spinner />
                            : this.state.myList.map(function(item) {
                                    return <li id="{item.id}">{item.name}</li>
                                })
                    }
                </ul>

                <input type="submit" value="REFRESH LIST" onClick={this.handleButtonClick} />
            </div>
        );
    }
});

var Foo=React.createClass({
handleButtonClick:function（）{
//在进行调用之前，请设置fetch标志
self.setState（{fetchInProgress:true}）；
返回$.ajax({
类型：“POST”，
url:“/some/refresh/url”，
数据：JSON.stringify（{}），
数据类型：“json”，
contentType:“应用程序/json”，
成功：（功能（响应）{
//当使用数据集更新时，也重置fetch标志
自我状态({
fetchInProgress:false，
myList:response.list
});
}),
失败：（（功能（原因）{
//即使提取失败，也要确保重置！
自我状态({
fetchInProgress:false
});
})
});
},
render:function（）{
返回(

{
this.state.fetchInProgress
: 
：this.state.myList.map（函数（项）{
return
{item.name}
})
}

);
}
});

以上@Tom答案的小编辑

render: function() {
    return (
        <div className="container">
            <ul>
                {
                    this.state.fetchInProgress ?
                        <Spinner />
                    :
                        this.state.myList.map(function(item) {
                            return <li id="{item.id}">{item.name}</li>
                        })
                }
            </ul>

            <input type="submit" value="REFRESH LIST" onClick={this.handleButtonClick} />
        </div>
    );
}

render:function（）{
返回(

{
这个.state.fetchInProgress？
:
this.state.myList.map（函数（项）{
return
{item.name}
})
}

);
}

谢谢！这很有道理下次只需留下评论即可！当我获得在任何地方发表评论的权利时：）谢谢！这种方法适用于简单场景，我们创建了一个帮助程序库，以避免手动切换fetchInProgress标志，并处理从多个位置启动的多个请求，希望能有所帮助：一篇关于其工作原理的帖子：感谢您提供的解决方案，这对我非常有用