Переключатели ввода устанавливают неверное состояние логического значения - PullRequest
Новая
       10

Переключатели ввода устанавливают неверное состояние логического значения

0 голосов
/ 19 ноября 2018

У меня есть две кнопки радио для установки атрибута срочности, который является логическим значением в базе данных. Я попытался установить состояния вручную, потому что по какой-то причине React продолжает изменять логические значения на строки. Это мой код: 

class Item extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     urgency: false
   };

  this.radioHandler = this.radioHandler.bind(this);
  }

  radioHandler (e) {
    console.log(this.state.urgency);
    if(e.target.value === "si"){
      this.setState({
        urgency : true
      })
    }
    else if(e.target.value === "no"){
      this.setState({
        urgency : false
     })
    }
    console.log(this.state.urgency);
  }


  render() {
    return (
      <div>       
        <Form>
          <FormGroup>
            <Label for="urgency">Urgencia</Label>
              <div>
                <CustomInput type="radio" id="urgency1" name="urgency" label="Si" value="si" checked={this.state.urgency === true}  inline onChange={this.radioHandler}/>
                <CustomInput type="radio" id="urgency2" name="urgency" label="No" value="no" checked={this.state.urgency === false} inline onChange={this.radioHandler}/>
              </div>
            </FormGroup>
         </Form>
       </div>
     );
   }
 }

Я установил 'urgency': false как значение по умолчанию для конструктора. Странно то, что если value = "si", распечатать this.state.urgency и установить состояние «ложь», а если значение = «no», this.state.urgency распечатать и установить состояние «true», и оба console.log выдает то же самое, даже если между ними есть setState.

Я действительно запутался, есть ли лучший способ сделать это?

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Ваш console.log (this.state.urgency) получает старое значение, потому что setState () асинхронный в отличие от this.state = {...}, который является синхронным, и я думаю, откуда возникла путаница.

setState () будет помещен в очередь событий компонента и будет вызываться когда-нибудь в будущем, но всегда после завершения функции, вызванной в нем. Однако вы можете принудительно выполнить некоторый код после завершения функции через setState ({...}, function () {...}).

Ожидаемый результат будет получен, если вы переключитесь на следующее: 

radioHandler (e) {
    console.log(this.state.urgency);
    if(e.target.value === "si"){
      this.setState({
        urgency : true
      }, function() { console.log(this.state.urgency); })
    }
    else if(e.target.value === "no"){
      this.setState({
        urgency : false
      }, function() { console.log(this.state.urgency); })
    }
}
0 голосов
/ 19 ноября 2018

setState является асинхронным. Если вы проверите значение this.state сразу после вызова setState, вы получите старое значение, а не новое. Если вам нужно что-то сделать после завершения обновления состояния, вы можете передать второй аргумент setState для обратного вызова. Вы можете узнать больше о том, как setState работает, в документации React .

...