有没有办法确保功能从上到下执行?

时间:2019-06-12 04:03:38

标签: javascript reactjs react-native setstate

我正在创建一个图像识别应用程序,并且我想使用按钮来更改状态。我在更改某些领域方面取得了成功,但遇到一个奇怪的问题。我将其设置为使用拨轮选择一个字段,并将其状态值设置为最近按下的按钮的文本。但是,尽管所有五个代码块实际上是相同的,但五个字段中只有两个正在按预期进行更新。

到目前为止,我已经尝试过移动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设置为Manufacturer并将Sonicare设置为Model时,最后一行来自服务器控制台日志。上面的onPressHide代码中最上面的if语句是有效的,但最下面的不是。我假设这与setState的异步性质有关,但是我对为什么它会更新某些字段而不是其他字段感到困惑。我没有收到任何错误消息,只是输出错误。任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

我对您的代码并没有太多关注,因为您已经了解了一些正确更新的信息...如果您遇到逻辑错误,则会找到它。

也许您的问题可能是setState是在React的幕后异步执行的。也有一个批处理系统。

过去,我需要同步setState来进行逻辑控制。我用同步回调来做这些事情...

not isnull(GetCurrentSelections())

在此处查看有关同步setState回调的更多信息:When to use React setState callback

祝你好运!