Есть ли способ обеспечить выполнение функции сверху вниз?

Я создаю приложение для распознавания изображений и хочу использовать кнопки для изменения состояния. Мне удалось изменить некоторые поля, но я столкнулся со странной проблемой. Я настроил его таким образом, что поле выбирается с помощью колеса выбора, а его значение состояния устанавливается в текст самой последней нажатой кнопки. Однако только два из пяти полей обновляются должным образом, несмотря на то, что все пять блоков кода практически идентичны.

До сих пор я пытался перемещать setState, перемещать вызовы внутри каждого setState, делать функцию onPressHide асинхронной и много вести журнал консоли.

this.state = {
      selectedItem : 4,
      itemList : ['Serial #', 'Manufacturer', 'Model', 'Model #', 'Manufacture Date'],
      uri : null,
      show : false,
      current : null,
      currentText: "",
      serial: "",
      manufac: "",
      model: "",
      modelNum: "",
      manuDate: "",
      assetId: "",
    };

onPickerSelect (index) {
    this.setState({
        selectedItem: index,
    })
  }

onPressHide() {
    if (this.state.selectedItem == 0) {
      this.setState((state) => ({
        serial: state.currentText,
        show: false,
      }));
      Alert.alert(
        'Update',
        "Serial number will be updated to: " + this.state.currentText,
        [
          {text: 'OK', onPress: () => console.log('OK Pressed')},
        ],
        {cancelable: false},
      );
    }
    if (this.state.selectedItem == 1) {
      this.setState((state) => ({
        manufac: state.currentText,
        show: false,
      }));
      Alert.alert(
        'Update',
        "Manufacturer will be updated to: " + this.state.currentText,
        [
          {text: 'OK', onPress: () => console.log('OK Pressed',)},
        ],
        {cancelable: false},
      );
    }

onPressSubmit() {
    var finalArr = {serial: this.state.serial, manufac: this.state.manufac, model: this.state.model, modelNum: this.state.modelNum, manuDate: this.state.manuDate};
    this.props.updateAll(finalArr);
  }

Data: {Serial: "", Manufacturer: "", Model: "Sonicare", ModelNumber: "", ManufactureDate: ""}

Последняя строка из журнала консоли сервера при попытке установить Philips в качестве производителя и Sonicare в качестве модели. Верхний оператор if в приведенном выше коде onPressHide работает, а нижний — нет. Я предполагаю, что это как-то связано с асинхронным характером setState, но я не понимаю, почему он будет обновлять одни поля, а не другие. Я не получаю никаких сообщений об ошибках, просто неверный вывод. Любая помощь будет принята с благодарностью!


react-native reactjs javascript setstate
person Aman1278    schedule 12.06.2019    source источник
comment
Функции всегда выполняются сверху вниз, без исключений. Асинхронные вызовы добавят элемент в очередь. В вашем случае я даже не вижу изменения state.selectedItem, поэтому я не знаю, почему вы ожидаете, что оба оператора if сработают.   -  person VLAZ    schedule 12.06.2019
comment
@VLAZ Извините за путаницу. state.selectedItem изменяется по мере изменения положения колеса выбора. Я упустил из поста некоторые функции, которые, по моему мнению, не имели отношения к делу и которые, должно быть, проскользнули! Я добавил этот код в сообщение. Спасибо!   -  person Aman1278    schedule 12.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я не особо смотрел на ваш код, видя, как вы уже правильно обновляете пару вещей... если у вас есть логическая ошибка, вы ее найдете.

Возможно, ваша проблема может заключаться в том, что setState выполняется асинхронно под капотом в реакции. Также есть система дозирования.

Раньше мне требовался синхронный setState для логического управления. Я использовал синхронный обратный вызов, чтобы делать эти вещи...

this.setState({ key: value }, function() {
    // Do Something Here After State is Updated
    yourFunction();
});

Подробнее о синхронном обратном вызове setState см. здесь: Когда использовать обратный вызов React setState

Удачи!

person Michael Paccione    schedule 12.06.2019