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

Posted 2023-02-21

【中文标题】填充所有值后如何自动调用函数

【英文标题】：how to call a function automatically once all the values are filled

【发布时间】：2020-04-30 09:45:22

【问题描述】：

我有一个表单需要进行一些验证以自动填充另一个字段，我希望在填充所有必需值后自动调用该函数，我尝试在最后一个字段上使用一个 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('');

【参考方案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 声明中删除（如果它们在范围内）。

【讨论】：

你不知道你帮了我多少，非常感谢

很高兴能帮上忙

【参考方案2】：

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

【讨论】：

这不是我在这里做的吗？ useEffect(() => if (vLastName && vSecondLastName && vName && vSecondName && vBirthDate) getRFC(); , [vLastName, vSecondLastName, vName, vSecondName, vBirthDate]);

如果你 console.log 你的状态是那些实际设置的值吗？

是的，他们是在他们被填满的那一刻设置的，我有 cosole.logedthem

你能显示声明vName, vSecondName, vLastName, vSecondLastName, vBirthDate的代码吗？