Настройка состояния в React Native не работает

Я пытаюсь установить состояние моего экрана на некоторые значения, которые мне нужно впоследствии отправить в базу данных. Эти значения берутся из формы и являются правильными значениями. Теперь у меня проблема с тем, что функция setState игнорируется...

Я пробовал этот код:

handleSubmit = () => {
    const value = this._form.getValue();

    console.info(value);

    this.setState({
        description: value.description,
        places_free: value.places_free
    })
    console.info(this.state);
}

журналы консоли для этого выглядят следующим образом:

Struct {
  "description": "Test description",
  "phone": "09 353 90 50",
  "places_free": 2,
  "website": "http://www.oakgent.be/",
}

Object {
  "description": "",
  "latitude": 51.055979,
  "longitude": 3.711001,
  "name": "Oak Restaurant",
  "phone": "09 353 90 50",
  "places_free": null,
  "website": "http://www.oakgent.be/",
}

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

handleSubmit = () => {
    const value = this._form.getValue();

    console.info(value);

    this.setState({
        description: "test",
        places_free: 1
    })
    console.info(this.state);
}

журналы консоли:

Struct {
  "description": "Test description",
  "phone": "09 353 90 50",
  "places_free": 2,
  "website": "http://www.oakgent.be/",
}

Object {
  "description": "",
  "latitude": 51.055979,
  "longitude": 3.711001,
  "name": "Oak Restaurant",
  "phone": "09 353 90 50",
  "places_free": null,
  "website": "http://www.oakgent.be/",
}

Я немного застрял в этом месте, и я надеялся, что кто-то может протянуть мне руку

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
139
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

setState является асинхронным выполнением console.info(this.state); вернет старые данные.

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

handleSubmit = () => {
  const value = this._form.getValue();

  console.info(value);

  this.setState({
    description: "test",
    places_free: 1
  }, () => console.info(this.state))

}

ДЕМО

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id = "root"></div>

<script type = "text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      modalShow: false
    };
  }

  render() {
    return (
      <div>
        <p onClick = {() => {
          console.info(this.state);
          this.setState({ modalShow: true }, () => {
            console.info(this.state);
          });
          
        }}>
          Calling state with a callback
        </p>
        <p onClick = {()=> {
          console.info(this.state);
          this.setState({ modalShow: true });
          console.info(this.state);
        }}>
        Priniting state after setting value
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>

Это было именно то, что было неправильно. Никогда не знал, что состояние настройки было асинхронным... Я потратил на это часы, но спасибо, что объяснили так быстро и просто!

Liam roels 03.06.2019 21:13

Вам нужно войти в консоль внутри действия setState, потому что setState является синхронным действием, поэтому попробуйте следующее:

this.setState({ description: "test", places_free: 1 }, () => console.info(this.state))

Другие вопросы по теме