显示特定错误消息 - NativeBase/React 本机

Question

目前正在学习 react-native，构建一个注册表单（使用 NativeBase 组件）并想为每个输入字段添加验证。

我目前面临的问题是我没有看到特定的错误消息，总是回退到默认值

#SignUp.js
export const SignUp = ({navigation}) => {
  const [errors, setErrors] = useState({});

  const validateFirstName = () => {
    if (formData.firstName === undefined) {
    setErrors({
      ...errors,
      name: 'First Name is required',
    });
    return false;
    } else if (formData.firstName.length < 3) {
      setErrors({
        ...errors,
        name: 'First Name is too short',
      });
      return false;
    }
    return true;
  };

  // First Name Input Field
  <FormControl isRequired isInvalid={'name' in errors}>
  <FormControl.Label>First Name</FormControl.Label>
  <Input value={firstName} onChangeText={firstName => setFirstName(firstName)}/>
  {'name' in errors ?
    <FormControl.ErrorMessage>Please enter a valid first name</FormControl.ErrorMessage>: ''
  }
  </FormControl>
}

所以在这个例子中，假设我提交了一个空的名字，我希望看到错误消息 First Name is required，但我得到 Please enter a valid first name

我似乎没有正确访问错误消息，我错过了什么吗？

谢谢

Answer 1

你漏掉了一件小事。只需更换

<FormControl.ErrorMessage>Please enter a valid first name</FormControl.ErrorMessage>: ''

到

<FormControl.ErrorMessage>{errors.name}</FormControl.ErrorMessage>: ''

因此，当组件处于 invalid 状态时，组件 FormControl.ErrorMessage 将显示其子组件。您可以阅读更多相关信息 here

我创建了一个snack，来展示如何有效地使用 FormControl。

显示特定错误消息 - NativeBase/React 本机

Show specific error message - NativeBase/React Native

javascript

react-native

native-base