1

在我的 react native 0.64 应用程序中，Modal 用于处理 Android 上的用户输入。执行一个useEffect钩子并检查一些参数的可用性。如果缺少键，则将激活模式并从用户那里获取输入，或为用户生成键。路由是使用 React Navigation 5.x 完成的。问题是用户点击生成新密钥后，代码卡住了，永远不会结束或完成。我怀疑该组件已卸载并导致挂起。但是我找不到代码卡住的原因。这是代码：

import Modal from "react-native-modal";
const [modalVisible, setModalVisible] = useState(false);
const [privateKey, setPrivateKey] = useState("");

const clickModalButton = async () => {  //handle the user click on Modal 
    var navOn = false;
    var _wallet;
    if (privateKey && helper.isHex(privateKey) && privateKey.length == 66) {  //64 hex/32 bytes, + 0x
//do something
    } else if (!privateKey) {  //when no user input, then key is generated
      console.log("generate new private key");  //<<==this console output show. But nothing after that. Suspected that the component is unmounted
      //generate new private key
      _wallet = ethers.Wallet.createRandom();  //random entropy created
      console.log("_wallet key ", _wallet.privateKey);
      setPrivateKey(_wallet.privateKey); //<<==Suspect after component unmounted, change state causes hanging of the app
      console.log("likely never be there");  //<<==never show on console output
      _wallet = new ethers.Wallet(_wallet.privateKey, provider);
     //do something simple
   ...}

useEffect(() => {
  //do something
  const fn = async () => {
    if (certain_condition_not_met) {
       setModalVisible(true); //<<==turn on the Modal to take user input
       return;
    }
  }
  fn();
})

return (
    <View style={styles.viewStyles}>
      <Text h1 style={styles.textHeader}>App</Text>
      <Image 
        source={imageFile}
        style={{ width:200,height:250 }}
      />
      <Spinner
          visible={spinner}
          textContent={message}
          textStyle={styles.spinnerTextStyle}
      />
      <View>
        <Modal  //<<==Modal
            style={{alignItems:"center", alignContent:"center"}}
            animationType="slide"
            transparent={false}
            visible={modalVisible}
            onBackdropPress={() => setModalVisible(false)}
            onRequestClose={() => {
              setModalVisible(!modalVisible);
            }}
          > 
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
                <Text style={{padding:20}}>Input Key</Text>
                <TextInput autoFocus={true} value={privateKey} onChangeText={keyChange} placeholder={keyPlaceholder} style={styles.textTitle} />
                <View style={{padding:20}}>
                  <Button style={styles.button} 
                            onPress={() => clickModalButton()} 
                            title="Save/Generate Key"/>
                </View>              
              </View>
            </View>
          </Modal>
      </View>  
    </View>
  );
}
4

0 回答 0