Question

我正在尝试从维基百科中获取一些数据并将其保存到state。由于某些原因我没有得到，当脚本点击state时，componentDidMount将为空

通话本身运作良好..

这是我的（缩短的）脚本：

define ['jquery', 'react'], ($, React) ->

  create: () ->

    React.createClass({

      getInitialState: () ->

        wikiData: {}
        userLocale: window.userLocale
        sTerm: 'dog'
        wikiDomain: '//' + window.userLocale + '.wikipedia.org'

      getWikiData: () ->

        self = @

        $.ajax

          url: self.state.wikiDomain + '/w/api.php?' +
            'action=parse' +
            '&prop=displaytitle%7Ctext' +
            '&format=json'
            '&page=' + self.state.sTerm +
            '&redirects=' +
            '&maxage=86400' +
            '&callback=?'

          async: false
          dataType: 'json'

          success: (data) ->

            if data.hasOwnProperty 'parse'
              self.setWikiData data

      setWikiData: (data) ->
        @setState wikiData: data.parse.text['*']

      componentWillMount: () ->
        @getWikiData()

      # Here is state empty again
      componentDidMount: () ->

        self = @

        $(document).ready () ->
          wikiContent = $(self.getDOMNode())
          # do things

      render: () ->
        <div className="content-inner" dangerouslySetInnerHTML={{__html: @state.wikiData}} />

})

Answer 1

我们可以对您的代码进行多次评论。

在jQuery.ajax（）

中使用async:false

此选项已弃用且非常危险。这意味着您完全锁定浏览器，直到收到响应。确实是在调用render()之前状态应该改变，所以我不明白为什么状态不会在之后更新。

最佳做法是异步执行此请求，然后在最终更改状态时，组件将自动重新呈现。这样，该组件的负载不会阻塞整个浏览器。

有关详细信息，请参阅the documentation。

在组件安装上执行ajax请求的正确方法。

幸运的是，react文档包含an article，解释了如何在组件安装上执行ajax请求。正如您所看到的，整个工作确实在componentWillMount中完成，但它们使用异步请求。

如果要在状态更改时执行操作，请不要仅使用componentDidMount，还要使用componentWillUpdate，因为组件安装时，您感兴趣的状态可能不可用。

AJAX响应不会保存到状态

1 个答案:

在jQuery.ajax（）

在组件安装上执行ajax请求的正确方法。