setState перед возвратом любого значения - PullRequest
Новая
       17

setState перед возвратом любого значения

0 голосов
/ 17 сентября 2018

Итак, у меня есть свойство в состоянии компонента с именем «method», для которого задана пустая строка («»), и функция с именем selectMethod ==> 

  selectMethod = (e) => {
      const x = e.target.getAttribute("return-data");  
      this.setState({method: x});  
      console.log(this.state.method);
  }

, котораясрабатывает, когда я нажимаю кнопку 

<button onClick={this.selectMethod} return-data="test">SELECT</button>

То, что я ожидал увидеть в консоли, это «тест».но когда я нажимаю кнопку, отображается только пустая строка, а затем, когда я нажимаю на кнопку еще раз, отображается слово «тест».Я пытаюсь установить для свойства метод «test» до того, как его утешат, и заставить тест отображаться на консоли с первого щелчка.Я не знаю, почему он это делает.Я имею в виду, что «method» должен быть установлен на «test» до того, как его утешат.

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Как объяснено, поскольку setState является асинхронным, ваш немедленный вызов console.log не может перехватить обновление.У вас есть два варианта:

  1. Использование обратного вызова setState метода.
  2. Регистрация вашего состояния в вашем методе render. 

class App extends React.Component {
  state = {
    name: ""
  };

  updateName = () =>
    this.setState({ name: "foo" }, () => console.log(this.state.name));

  render() {
    console.log(this.state.name);
    return <button onClick={this.updateName}>Update name</button>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Как видите, мы регистрируемся здесь в двух местах.Один с обратным вызовом, другой в методе render.Поскольку в первом рендере нет ни одного имени, сначала вы видите "".После обновления состояния вы увидите значение.

0 голосов
/ 17 сентября 2018

setState происходит не сразу, поэтому нельзя полагаться на то, что оно будет новым значением в том же цикле выполнения, как этот.Тем не менее, он принимает обратный вызов в качестве второго аргумента, который вы можете использовать при необходимости.Нашел короткий небольшой пост об этом для ya - https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

Пример:

this.setState({method: x}, function () { console.log(this.state.method); })

...