반응 - 상태가 업데이트되지 않음

반응 - 상태가 업데이트되지 않음

여기서 설정하려고 합니다.state.autocomplete'hello'를 눌러 인쇄합니다만, 상태는 null인 것 같습니다.어떻게 그럴 수 있죠?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);
  }

});

reactjs 문서에서:

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 ...
    }
)

구성 요소의 초기 상태를 설정해야 합니다. 구성 요소 상단에 다음을 추가하십시오.

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

편집:

Dynamic From 컴포넌트에는 다음이 있습니다.

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

상태를 참조하려고 하므로 작성해야 합니다.

autocomplete_form={this.state.autocomplete_from}

또한 하위 구성 요소에서 상태를 설정하려고 하며 상태를 직접 수정해서는 안 됩니다.가장 좋은 방법은 함수를 Dynamic From(상태를 유지)에서 Autocomplete From Checkboxes로 전달하는 것입니다.이렇게요.

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);
    }
});

setState 실행 후 업데이트된 상태 값을 보려면 다음과 같은 작업을 수행해야 합니다.

 this.setState( { autocomplete_from: 'event.target.value' }, () => { 
    console.log(this.state.autocomplete_from);//this will print the updated state value
 });

언급URL : https://stackoverflow.com/questions/29490581/react-state-not-updated