Coffeescript React JS:调用setState后组件未更新

我有一个小的react应用程序，我正在玩，去掌握图书馆的窍门吧。该应用程序只是一系列列表，由服务器填充。单击列表项时，该项的值将添加到应用程序级别的列表过滤器中，然后使用该过滤器调用新数据以填充列表

问题是，即使在调用

setState

时，我似乎也无法使我的列表与来自应用程序（父应用程序）的新数据保持一致。这是我的密码（咖啡）：

---

所有列表在第一次渲染时都会呈现良好状态，按预期获取未过滤的数据。当我单击列表项时，

SearchApp

接收事件，并相应地更新自己的状态

componentWillReceiveProps

在

TopList

类上被正确调用，但是那里的

setState

调用不会更新它们的状态，因此它们不协调。我已验证

nextrops

是否包含新信息。我遗漏了什么？

没有任何理由将道具保存在状态；而且把道具作为真相的来源也不容易出错。它还稍微简化了代码

然而，对于实际问题；componentWillMount在这里只调用一次。如果希望在传递新参数时重复AJAX请求；您可以这样做：

TopList = React.createClass
  getInitialState: ->
    data: []

  getSearchResultsFromServer: (params) ->
    request.post("/facet").send(params).end (results) =>
      if @isMounted()
        @setState data: JSON.parse(results.text) 

  componentWillReceiveProps: (nextProps) -> @getSearchResultsFromServer nextProps.params
  componentDidMount: -> @getSearchResultsFromServer @props.params

  render: ->
    itemNodes = _.map @state.data, (item) =>
      key = item.value
      TopItem
        value: item.value
        count: item.count
        key: key
        onItemClick: @handleItemClick

    (div {className: 'widget top-item'},
      (h2 {className: 'widget-header'}, "#{@props.title}")
      (ul {className: 'top-items-list'}, itemNodes)
    )

  handleItemClick: (value) ->
    @props.onItemClick
      value: value
      field: @props.params.field

---

理想情况下，ajax库将支持中止请求；在componentWillUnmount中，您将中止这些请求。

就是这样做的。非常感谢！正如你所建议的，我还通过道具移除了状态设置。

TopList = React.createClass
  getInitialState: ->
    data: []

  getSearchResultsFromServer: (params) ->
    request.post("/facet").send(params).end (results) =>
      if @isMounted()
        @setState data: JSON.parse(results.text) 

  componentWillReceiveProps: (nextProps) -> @getSearchResultsFromServer nextProps.params
  componentDidMount: -> @getSearchResultsFromServer @props.params

  render: ->
    itemNodes = _.map @state.data, (item) =>
      key = item.value
      TopItem
        value: item.value
        count: item.count
        key: key
        onItemClick: @handleItemClick

    (div {className: 'widget top-item'},
      (h2 {className: 'widget-header'}, "#{@props.title}")
      (ul {className: 'top-items-list'}, itemNodes)
    )

  handleItemClick: (value) ->
    @props.onItemClick
      value: value
      field: @props.params.field