填充所有值后如何自动调用函数

Question

我有一个表单需要进行一些验证以自动填充另一个字段，我希望在填充所有必需值后自动调用该函数，我尝试在最后一个字段上使用一个 onChange 来执行此操作，但它不会如果用户在其他输入之前填写该输入，则'不起作用。

有什么建议吗？这是我的 api 调用

    const getRFC = ({vLastName,vSecondLastName,vName,vSecondName,vBirthDate}) => {
  ForceApi.post(`/GetRfcController.php`, {  vName, vSecondName, vLastName, vSecondLastName, vBirthDate })
    .then(res => {
      console.log(res.data.resultRFC);
      setvRFC(res.data.resultRFC);
    })
}

这是我的文本输入和日期选择器

 return ( 
    <ScrollView>
      <View style={styles.buttonContainer}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvName => setvName(newvName.toUpperCase())}
            value={vName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
        </View>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Segundo nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvSecondName => setvSecondName(newvSecondName.toUpperCase())}
            value={vSecondName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
          </View>
          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="Apellido paterno"
              underlineColorAndroid='transparent'
              onChangeText={newvLastName => setvLastName(newvLastName.toUpperCase())}
              value={vLastName}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>
          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="Apellido materno"
              onChangeText={newvSecondLastName => setvSecondLastName(newvSecondLastName.toUpperCase())}
              underlineColorAndroid='transparent'
              value={vSecondLastName}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>
          <View style={styles.containerdate}>
            <DatePicker 
              date={vBirthDate} //initial date from state
              mode="date" //The enum of date, datetime and time
              placeholder="select date"
              format="DD/MM/YYYY"
              minDate="01/01/1900"
              maxDate="01/01/2019"
              confirmBtnText="Confirm"
              cancelBtnText="Cancel"
              androidMode="spinner"
              customStyles={{
                placeholderText: {
                  fontSize: 16,
                },
                dateIcon: {
                  height: 0,
                  width: 0,
                },
                dateText: {
                  color: '#b3b4b5',
                  fontSize: 16,
                },
                dateInput: {
                  borderWidth: 0,
                }
              }}
              onDateChange={(date) => {setvBirthDate(date);} }
            />
          </View>

这是必须使用 api 的值更新的文本输入

         <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder={vRFC}
              underlineColorAndroid='transparent'
              value= {vRFC}
              editable={false} 
              selectTextOnFocus={false}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>

我试过了

useEffect(() => {
if (vLastName && vSecondLastName && vName && vSecondName && vBirthDate) {
    getRFC();
}
}, [vLastName, vSecondLastName, vName, vSecondName, vBirthDate]);

我试过这个，但在每个字段都被填充的那一刻，它会向我发出警告并且不执行该函数，警告说TypeError: undefined is not an object (evaluating '_ref2.vLastName')]

这很奇怪，因为当我使用我制作的按钮（只是调用函数）时，没有发生任何错误

任何帮助将不胜感激

edit----- 这就是我声明状态的方式

    const [vName, setvName] = useState('');
const [vSecondName, setvSecondName] = useState('');
const [vLastName, setvLastName] = useState('');
const [vSecondLastName, setvSecondLastName] = useState('');
const [vCellphone, setvCellphone] = useState('');
const [vBirthDate, setvBirthDate] = useState('');
const [vRFC, setvRFC] = useState('RFC');
const [vGender, setvGender] = useState(1);
const [vEmail, setvEmail] = useState('');

Answer 1

const getRFC = ({vLastName,vSecondLastName,vName,vSecondName,vBirthDate}) => {

声明将对象定义为参数

useEffect(() => {
  if (vLastName && vSecondLastName && vName && vSecondName && vBirthDate) {
    getRFC();
  }
}, [vLastName, vSecondLastName, vName, vSecondName, vBirthDate]);

getRFC() 不带参数调用...所以undefined ...并且这个未定义不包含vLastName，警告原因

解决方案：传递参数或从getRFC 声明中删除（如果它们在范围内）。

Answer 2

您可以在状态中设置字段的值，然后在填写每个值时检查其他值的状态。如果满足所有值，则执行该函数。