Состояние не обновляется при изменении ввода - PullRequest
Новая
       6

Состояние не обновляется при изменении ввода

0 голосов
/ 29 сентября 2019

У меня есть компонент Input, который имеет функцию UpdateState для изменения. 

  const UpdateState = e => {
setPayload([e.target.value]);
console.log("update state", payload);
};

Проблема в том, что состояние, зарегистрированное в консоли, всегда является предыдущим, поэтому явведите новое значение в поле ввода в первый раз, когда состояние будет по-прежнему пустым, и если, например, я добавлю пробел и добавлю конец, то состояние переключится на ранее набранную строку:

enter image description here

Как мне выполнить обновление "живого" состояния?

Это мой компонент, использующий ранее прикрепленную функцию: 

<FormControl fullWidth className={classes.textArea}>
      <Input
        onChange={e => {
          UpdateState(e);
        }}
        defaultValue={payload}
      />
      <Button
        variant="contained"
        color="primary"
        className={classes.button}
        onClick={SubmitReview}
      >
        Submit{" "}
      </Button>
      {JSON.stringify(response.data.predictions)}
    </FormControl>

Ответы [ 2 ]

0 голосов
/ 29 сентября 2019

useState из React.PureComponent асинхронный, как this.setState из React.Component. 

setPayload(e.target.value);
console.log("update state", payload); //Value here not yet updated

Попробуйте использовать useEffect: 

useEffect(() => {
    // action on update of payload
    console.log(payload) // Value of payload will updated here
}, [payload]);

<Input
    onChange={e=> setPayload([e.target.value])}
    defaultValue={payload}
/>
0 голосов
/ 29 сентября 2019 
remove the [] array  try without the     `setPayload(e.target.value);`

 const UpdateState = e => {
    setPayload(e.target.value);
    console.log("update state", payload);
    };

    <FormControl fullWidth className={classes.textArea}>
          <Input
            onChange={e=>
              UpdateState;}
            defaultValue={payload}
          />
          <Button
            variant="contained"
            color="primary"
            className={classes.button}
            onClick={SubmitReview}
          >
            Submit{" "}
          </Button>
          {JSON.stringify(response.data.predictions)}
        </FormControl>

скажите, работает или нет

...