反应原生的承诺中的条件渲染

Question

我正在从外部 api 获取数据。 此数据是货币对，例如 EURUSD，分别具有实时卖价和买价，例如 1.17123 , 1.17150。 因此，应用程序的用户需要输入未来价格，以便如果要价或买价达到用户输入的价格，则会记录一条消息。 我尝试使用承诺，但它会立即输出用户在 textinput 中输入的价格，我运行应用程序而不是检查价格是否达到了用户期望在达到时收到提醒的未来价格。 下面是我的代码：

 const [pricealert, setPricealert]  = useState(0)

function checkAlertCondition (){
  return new Promise((resolve, reject) => {
    if(pricealert >= {...data.prices.AskPrice})
    {
      resolve({
        Pair: {...data.prices.instrument},
        message: "Price" + pricealert + "Has been hit"
      });
    } else if (pricealert <= {...data.prices.BidPrice}) {
      resolve({
        Pair:{...data.prices.instrument},
        message: "Price" + pricealert + "has been hit"
      });
    } else {
      reject ("Create Alert")
    }
  });
}


      

 <Modal visible={modalopen} animationType={"fade"}>
   <View style={styles.modal}>
     <View>
       <Text style={{textAlign: "center", fontWeight: "bold"}}>
         {data.prices[clickedindex].instrument}
       </Text>
       <Text style={{textAlign: "center"}}>
         {data.prices.AskPrice}/{data.prices.BidPrice}
       </Text>
       <Card.Divider/>
       <View style={{ flexDirection: "row"}}>
         <View style={styles.inputWrap}>
           <TextInput
             style={styles.textInputStyle}
             value={pricealert}
             onChangeText = {(pricealert) => setPricealert(pricealert)}
             placeholder="Alert Price"
             placeholderTextColor="#60605e"
             numeric
             keyboardType='decimal-pad' 
           />
           </View>
         </View>   
         <TouchableOpacity
           style={styles.button}
           onPress={() => {
             if(pricealert.length < 7) {
               Alert.alert("Error", "Enter a valid price")
               return;
             } else if (pricealert.length > 7) {
               Alert.alert("Error", "Enter a valid price")
               return;
             }
             setModalOpen(false);

 checkAlertCondition()
                  .then((message) => {
                    console.log(JSON.stringify(message) )
                    .catch((err) => {
                      console.log(err)
                    })
                    
                  });} }
           >
             <Text style={styles.buttonTitle}>OK</Text>
           </TouchableOpacity>
         </View>
       </View>
     </Modal>

Answer 1

也许你有两个选择，第一个是在 TextInput 的 onEndEditing 中做你的逻辑或使用 React 的 useMemo，应用这个逻辑你可以有以下内容：