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

AJAX 响应不会保存到状态中

AJAX response won't be saved into state

javascript

coffeescript

reactjs

react-jsx

在 jQuery.ajax()

组件挂载 ajax 请求的正确方法。