Is there a way to ensure a function executes from top to bottom?

Question

I'm creating an image recognition app, and I want to use buttons to alter the state. I've had success with changing some fields, but I'm encountering an odd issue. I have it set up such that a field is chosen using the picker wheel and its state value is set to the text of the most recently pressed button. However, only two of the five fields are updating as expected, despite all five code blocks being virtually identical.

So far I've tried moving the setState, moving the calls within each setState, making the onPressHide function async, and a lot of console logging.

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: ""}

The final line is from the server console log when attempting to set Philips as the Manufacturer and Sonicare as the Model. The top if statement in the onPressHide code above is functional, but the bottom is not. I'm assuming this has something to do with the asynchronous nature of setState, but I'm confused as to why it would update some fields and not others. I'm not getting any error messages, just an incorrect output. Any help would be greatly appreciated!

Functions always execute from top to bottom, no exceptions. Async calls will add an item to the queue. In your case, I don't even see `state.selectedItem` changing, so I don't know why you'd expect both `if` statements to fire. — VLAZ, Jun 12 '19 at 04:18
@VLAZ Sorry for the confusion. state.selectedItem changes as the position of the picker wheel changes. I left some functions out of the post that I thought weren't relevant and that must've slipped through! I have added that code to the post. Thanks! — Aman1278, Jun 12 '19 at 08:33

score 0 · Answer 1 · answered Jun 12 '19 at 06:36

I haven't looked much at your code seeing as how you have a couple things updating correctly already... if you have a logic error you will find it.

Perhaps your issue could be that setState is performed asynchronously under the hood in react. There is a batching system as well.

I have needed synchronous setState before in the past for logic control. I used the synchronous callback to do these things...

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

Look here for more on synchronous setState callback: When to use React setState callback

Good Luck!

Is there a way to ensure a function executes from top to bottom?

1 Answers1