React JS: Component not updating, after calling setState - coffeescript

Question

I've got a small react app I'm playing with, just go get the hang of the library. The app is just a series of lists, which are populated from a server. When a list item is clicked, the value of that item is added to a list filters at the app level, which will then be used to call new data to populate the lists.
The problem is that I can't seem to get my lists to reconcile with the new data from the app (parent), even when calling setState. Here's my code (coffee):
###
#jsx React.DOM
###
{div, h1, h2, h4, ul, li, form, input, br, p, strong, span, a} = React.DOM
SearchApp = React.createClass
handleTopItemClick: (filter) ->
facet = filter.field
filters = #state.filters
if filters.facets[facet] and filters.facets[facet].length > 0
filters.facets[facet].push filter.value
else
filters.facets[facet] = [filter.value]
strArr = []
_.each filters.facets, (valArr, field) ->
_.each valArr, (val) ->
strArr.push "+(#{field}:\"#{val}\")"
#setState
filters: filters
queryStr: strArr.join(' ').trim()
getInitialState: ->
filters:
facets: {}
queryStr: ''
render: ->
(div {
id: 'content'
className: "search-wrap"
},
(h1 {}, "Search")
(div
id: 'widgets',
(TopList
title: 'Top Domains'
params:
query: #state.queryStr
field: 'domain'
onItemClick: #handleTopItemClick
)
(TopList
title: 'Top Senders'
params:
query: #state.queryStr
field: 'from'
onItemClick: #handleTopItemClick
)
(TopList
title: 'Top Recipient'
params:
query: #state.queryStr
field: 'recipient'
onItemClick: #handleTopItemClick
)
)
)
TopItem = React.createClass
getDefaultProps: ->
value: ''
count: 0
field: null
render: ->
(li {},
(a {
onClick: #handleClick
className: 'top-item-filter'
title: #props.value
},
(strong {}, #props.value)
(span {}, #props.count)
)
)
handleClick: (event) ->
event.preventDefault()
#props.onItemClick #props.value
TopList = React.createClass
getInitialState: ->
data: []
params: #props.params
componentWillReceiveProps: (nextProps) ->
#setState params: nextProps.params
componentWillMount: ->
request.post("/facet").send(#state.params).end (results) =>
#setState data: JSON.parse(results.text)
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
React.renderComponent SearchApp(null), document.getElementById("content")
The lists all render fine the first time around, fetching the unfiltered data as expected. When I click on a list item, the SearchApp receives the event, and updates its own state accordingly. componentWillReceiveProps is properly called on the TopList classes, but the setState call there doesn't update their state, and thus, they aren't reconciling. I've verified that nextProps contains the new information. What am I missing?

Answer 1

There isn't really any reason to save the props in state; and it's much less error prone to keep props as the source of truth. It also simplifies the code a bit.
For the actual issue, though; componentWillMount is only called once here. If you want to repeat the AJAX request when new params are passed; you can do that like so:
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
Ideally, your ajax library would support aborting requests; and in componentWillUnmount you abort those requests.