React Reflux: onUpdate#this.trigger(rows) causes an infinite loop

Question

I have a React component that displays radio buttons. Changes to these should be handled by Reflux. As I understand it this.trigger(object) should be called to save any changes to the object. Unfortunately that causes an infinite loop.

I have posted an JSFiddle here that demonstrates the error. Can anyone see what I'm doing wrong? How should onUpdateAutoComplete(checked) be crafted?

<AutoCompleteFrom autocomplete_from={form_fields.autocomplete_from} />

The checkbox component

var AutoCompleteFrom = React.createClass({
  mixins: [Reflux.connect(store)],

  render: function() {
    var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
      return (
        <label for={value}>
          <input type="radio" name={'autocomplete_from'+this.props.id} value={value}
            onChange={actions.updateAutoComplete(this.props.checked)} 
            checked={this.props.checked == value}
          />
          {value}
        </label>
      );
    }, this);
    return (
      <div className="autocomplete-from">
        {autocompleteFrom}
      </div>
    );
  }
});

onUpdateAutoComplete

  onUpdateAutoComplete(checked){
    console.log('checked:', checked);
    rows[0].autocomplete_from = checked;
    // this.trigger(rows); // <== Causes an infinite loop when included.
  },

Cheers, Martin

score 0 · Answer 1 · answered Apr 14 '15 at 13:45

0

The fix is to call onChange={actions.handleChange} and have that triggering actions.updateAutoComplete(event.target.value, event.target.name);

Fiddle is updated with working code.

answered Apr 14 '15 at 13:45

martins

9,669
11
57
85

React Reflux: onUpdate#this.trigger(rows) causes an infinite loop

1 Answers1