React Native中onPress传自定义函数不触发及useState值异常问题

问题1：自定义Press函数未触发/逻辑不执行 #

• 字符串长度判断错误：enteredApiKey.length() 是错误写法，字符串的长度是属性而非方法，应改为 enteredApiKey.length === 0
• 未调用父组件的 onPress：else 分支里仅写 props.onPress 只是引用函数，没有执行，需改为 props.onPress()
• （可选）函数命名遵循小驼峰规范，建议把 Press 改为 pressHandler

问题2：useState存储的enteredApiKey始终为空 #

keyInputHandler 中更新状态时传错了值，应该用 onChangeText 传入的最新输入值 enteredKey，而不是旧的状态值 enteredApiKey，修正为 setEnteredKey(enteredKey)

修正后的完整代码 #

function LoginKey(props) {
  const [enteredApiKey, setEnteredKey] = useState('');

  // 修正：使用传入的最新输入值更新状态
  function keyInputHandler(enteredKey) {
    setEnteredKey(enteredKey);
  }

  // 修正：字符串长度判断 + 调用父组件onPress
  function pressHandler() {
    if (enteredApiKey.length === 0) {
      Alert.alert("enter a value ");
    } else {
      props.onPress();
    }
  }

  return (
    <Modal visible={props.visible} animationType='slide'>
      <View style={styles.inputContainer}>
        <Image
          style={styles.image}
          source={require('../assets/Image/ucp.png')}
        />
        <TextInput
          style={styles.textInput}
          placeholder='Enter Api key !'
          onChangeText={keyInputHandler}
        />
        <View style={styles.buttonContainer}>
          <Button title='Add Goal' onPress={pressHandler} />       // 现在可正常工作
          <Button title='Add Goal' onPress={props.onPress} />    // 保持正常工作
        </View>
      </View>
    </Modal>
  );
}

内容的提问来源于stack exchange，提问作者tomtom