反應原生的承諾中的條件渲染

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，應用這個邏輯你可以有以下內容：