Как очистить route.param в React Native после отправки формы обновления или нажатия кнопки возврата - PullRequest
0 голосов
/ 06 августа 2020

Я создал приложение администратора, в котором у меня есть три основные страницы для работы: - сначала DoctorScreen - где будут отображаться все выбранные врачи. второй профиль доктора - который создается путем передачи значений с экрана доктора на маршрут профиля v ie. парам. третье Добавить врача, если доступна форма для добавления врача для сохранения в базе данных.

Проблема в том, что у меня с собой более 1 карты врача, как только я нажал кнопку редактирования в профиле врача, чтобы обновить детали первой Doctorcard, существующие детали, которые я получаю из route.param, остаются в param.

, и когда я нажимаю на второго врача, чтобы отредактировать форму подробностей, все еще содержит значения первой Doctorcard.

, которые показывают эти значения параметров не очищаются.

Обновить страницу врача: -

const UpdateDoctor = ({navigation,route})=>{
 const [first_name,setFirstName] = useState(route.params.first_name)
    const [last_name,setLastName] = useState(route.params.last_name)
    const [mobile,setMobile] = useState(route.params.mobile)
    const [email,setEmail] = useState(route.params.email)
    const [password,setPassword] = useState(route.params.password)
    const [gender,setGender] = useState(route.params.gender)
    const [DOB,setDOB] = useState(route.params.DOB)
    const [registration_no,setRegistration] = useState(route.params.registration_no)
    const [experience,setExperience] = useState(route.params.experience)
    const [consultation,setConsultation] = useState(route.params.consultation)
    const [degree,setDegree] = useState(route.params.degree)
    const [designation,setDesignation] = useState(route.params.designation)
    const [department,setDepartment] = useState(route.params.department)
    const [specialities,setSpecialities] = useState(route.params.specialities)
    const [picture,setPicture] = useState(route.params.picture)
     const [modal,setModal] = useState(false)


const updateDetails = ()=>{
        fetch("http://10.0.2.2:3000/update_doctor",{
            method:"post",
            headers:{
              'Content-Type': 'application/json'
            },
            body:JSON.stringify({
                id:route.params._id,
                first_name,
                last_name,
                mobile,
                email,
                gender,
                DOB,
                password,
                picture,
                registration_no,
                experience,
                consultation,
                degree,
                designation,
                department,
                specialities
            })
        })
        .then(res=>res.json())
        .then(data=>{
            Alert.alert(`${first_name} is updated successfully`)
            navigation.navigate("Doctors")
            
        })
        .catch(err=>{
          Alert.alert("something went wrong")
      })
      
    }

return(

        <View style={styles.container}>

        <View style={styles.head}> 
        <MaterialIcons 
                        name="navigate-before"
                        size={28}
                        onPress={() => navigation.goBack()}
                        style={styles.back}/>

              <Text style={styles.headtext}>Add Doctor</Text>
        </View>
    
    

        <ScrollView style={styles.formArea}>
            <TextInput
                label='First Name'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={first_name}
               // onFocus={()=>setenableShift(false)}
                theme={theme}
                mode="outlined"
                onChangeText={text => setFirstName(text)}
            />
            <TextInput
                label='Last Name'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={last_name}
                // onFocus={()=>setenableShift(false)}
                theme={theme}
                mode="outlined"
                onChangeText={text => setLastName(text)}
            />
            <TextInput
                label='Email'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={email}
                theme={theme}
                // onFocus={()=>setenableShift(false)}
                mode="outlined"
                onChangeText={text => setEmail(text)}
            />
            <TextInput
                label='Phone'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={mobile}
                theme={theme}
                //onFocus={()=>setenableShift(false)}
                keyboardType="number-pad"
                mode="outlined"
                onChangeText={text =>setMobile(text)}
            />
             
            <TextInput
                label='Password'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={password}
                mode="outlined"
                secureTextEntry={true}
                // onFocus={()=>setenableShift(true)}
                onChangeText={text =>setPassword(text)}
            />
            <TextInput
                label='Gender'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={gender}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setGender(text)}
            />
            <TextInput
                label='Date of Birth'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={DOB}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setDOB(text)}
            />
            <TextInput
                label='Registration No'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={registration_no}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setRegistration(text)}
            />
            <TextInput
                label='Experience'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={experience}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setExperience(text)}
            />
            <TextInput
                label='Consultation Fee'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={consultation}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setConsultation(text)}
            />
            <TextInput
                label='Degree'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={degree}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setDegree(text)}
            />
            <TextInput
                label='Designation'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={designation}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setDesignation(text)}
            />
            <TextInput
                label='Department'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={department}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setDepartment(text)}
            />
            <TextInput
                label='Specialities'
                placeholderTextColor="#666666"
                style={styles.inputStyle}
                value={specialities}
                theme={theme}
                // onFocus={()=>setenableShift(true)}
                mode="outlined"
                onChangeText={text =>setSpecialities(text)}
            />
             <Button 
             style={styles.btn}
             icon={picture==""?"upload":"check"}
              mode="contained" 
              theme={theme}
              onPress={() => setModal(true)}>
                    Upload Image
             </Button>
            
             <Button 
             style={styles.btn}
             icon="content-save"
              mode="contained" 
              theme={theme}
              onPress={() => updateDetails()}>
                   Update details
             </Button>
             


}

Страница профиля врача: - const DoctorProfile = ({navigation, route}) => {

const {_id, first_name, last_name, mobile, email, пол, DOB, пароль, изображение, registration_no, опыт, консультация, степень, назначение, отдел, специальности, описание, время начала, время окончания, ewsfees, дополнительные сборы , Day, slotduration, followupday

} = route.params.item

Это кнопка навигации, с помощью которой я передаю дату в Upd ела форма

<Button 
             icon="account-edit"
             mode="contained"
             theme={theme}
              **onPress={() => {
                 navigation.navigate("updateDetails",
                 {_id,
                    first_name,
                    last_name,
                    mobile,
                    email,
                    gender,
                    DOB,
                    password,
                    picture,
                    registration_no,
                    experience,
                    consultation,
                    degree,
                    designation,
                    department,
                    specialities }**
                 ) 
              }}>
                Edit
            </Button>

...