AJAX 响应不会保存到状态

Question

我正在尝试从维基百科获取一些数据并将其保存到state。 出于某种原因，我不明白，当脚本点击 componentDidMount 时，state 将为空

调用本身运行良好..

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

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，因为您感兴趣的状态可能在组件挂载时不可用。