React - Состояние не обновлено

Здесь я пытаюсь установить state.autocomplete на "привет", а затем распечатать его, но состояние кажется нулевым. Как это может быть, когда я просто обновляю состояние с помощью setState? data устанавливается как глобальная переменная.

  var data = {
    populate_at: ['web_start', 'web_end'],
    autocomplete_from: ['customer_name', 'customer_address']
  };


  var AutocompleteFromCheckboxes = React.createClass({
    handleChange: function(e) {
      this.setState( { autocomplete_from: 'event.target.value' } );
      console.log('autocompleteFrom state: ', this.state.autocomplete_from);
      // ^  => Uncaught TypeError: Cannot read property 'autocomplete_from' of null
      return 1;
    },
    render: function() {
      var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
        return (
          <label for={value}>
            <input type="checkbox" name={value} value="{value}"
              onChange={this.handleChange.bind(this)}
              ref="autocomplete-from"/>
            {value}
          </label>
        );
      }, this);
      return (
        <div className="autocomplete-from">
          {autocompleteFrom}
        </div>
      );
    }
  });

  var DynamicForm = React.createClass({
    getInitialState: function() {
      return {
        name              : null,
        populate_at       : null,
        same_as           : null,
        autocomplete_from : "not set",
        title             : null
      };
    },
    saveAndContinue: function(e) {
      e.preventDefault();
      var data = {
        name     : this.refs.name.getDOMNode().value,
      };
      console.log('data: ' + data.name);
    },

    render: function() {
      return (
          <AutocompleteFromCheckboxes
            autocomplete_from={this.props.data.autocomplete_from} />
      );
    }
  });


  var mountpoint = document.getElementById('dynamic-form');
  if ( mountpoint ) {
    React.render(<DynamicForm data={data} />, mountpoint);
  }

});

Ответы

Ответ 1

Из реакционных документов:

setState() не сразу мутирует this.state, а создает ожидающий переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

https://facebook.github.io/react/docs/component-api.html

Что вы можете сделать, это передать функцию обратного вызова в setState, которая запускается после обновления состояния:

this.setState(
    {autocomplete_from: ...}, 
    function () {
        ... at this point the state of the component is set ...
    }
)

Ответ 2

Вам нужно установить начальное состояние вашего компонента, попробуйте добавить следующее к вершине вашего компонента.

getInitialState: function() {
  return {
   autocomplete_from: ''
  };
}

ИЗМЕНИТЬ:

В вашем компоненте DynamicFrom у вас есть:

render: function() { return ( <AutocompleteFromCheckboxes autocomplete_from={this.props.data.autocomplete_from} /> ); }

Поскольку вы пытаетесь ссылаться на состояние, вы должны написать autocomplete_form={this.state.autocomplete_from}

Также вы пытаетесь установить состояние из дочернего компонента и не должны напрямую изменять состояние. Лучший способ приблизиться к этому - передать функцию DynamicFrom (удерживает состояние) в AutocompleteFromCheckboxes. Таким образом.

var DynamicForm = React.createClass({ handleChange: function(value) { this.setState({autocompelete_from: value}); }, render: function() { return( <AutocompleteFromCheckboxes autocomplete_from={this.state.autocomplete_from} handleChange={this.handleChange} /> ); }, .... });

Затем вызовите эту функцию в дочернем компоненте

AutocompleteFromCheckboxes = React.createClass({ .... onChange={this.handleChange} .... handleChange: function(e) { this.props.handleChange(e.target.value); } });