自动调用函数

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>

任何帮助将不胜感激

Answer 1

你可以使用useEffect钩子

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