Javascript 从单独的组件重置条件渲染
以前我使用函数Javascript 从单独的组件重置条件渲染,javascript,reactjs,typescript,react-native,render,Javascript,Reactjs,Typescript,React Native,Render,以前我使用函数showUsers和{isSubmitted&&showUsers（userData）}在graphql查询后有条件地呈现一些项目。在这种情况下，我使用了 setIsSubmitted(false); setUserData(null); 在按钮上重置数据并停止条件渲染。但是，现在我已经将showUsers移动到Users一个单独的组件。在这种情况下，我无法找到传递setIsSubmitted和setUserData的方法。我想修复它，使突变运行后，渲染应该消失 注释掉的部分是我
showUsers{isSubmitted&&showUsers（userData）}setIsSubmitted(false);
setUserData(null);
showUsersUserssetIsSubmittedsetUserDataexport const AddContactTry: React.FunctionComponent = () => {
const validationSchema = phoneNumberValidationSchema;
const { values, handleChange, handleSubmit, dirty, handleBlur, isValid, resetForm, isSubmitting, setSubmitting, touched}= useFormik({
initialValues: {
phoneNumber: '',
},
//isInitialValid:false,
validationSchema,
onSubmit: (values: FormValues) => {
handleSubmitForm(values);
},
});
console.log('isDirty', dirty);
console.log('isValid', isValid);
console.log('phone numm', values.phoneNumber);
console.log('submitting status', isSubmitting);
const [isSubmitted, setIsSubmitted] = useState(false);
const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');
const navigation = useNavigation();
const _onLoadUserError = React.useCallback((error: ApolloError) => {
Alert.alert('Oops, try again later');
}, []);
// const [
// createUserRelationMutation,
// {
// data: addingContactData,
// loading: addingContactLoading,
// error: addingContactError,
// called: isMutationCalled,
// },
// ] = useCreateUserRelationMutation({
// onCompleted: () => {
// Alert.alert('Contact Added');
// },
// });
// const showUsers = React.useCallback(
// (data: UsersLazyQueryHookResult) => {
// if (data) {
// return (
// <View style={styles.users}>
// {data.users.nodes.map(
// (item: { firstName: string; lastName: string; id: number }) => {
// const userName = item.firstName
// .concat(' ')
// .concat(item.lastName);
// return (
// <View style={styles.item} key={item.id}>
// <Thumbnail
// style={styles.thumbnail}
// source={{
// uri:
// 'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
// }}></Thumbnail>
// <Text style={styles.userName}>{userName}</Text>
// <View style={styles.addButtonContainer}>
// <Button
// rounded
// style={styles.addButton}
// onPress={() => {
// //addContact(Number(item.id));
// setIsSubmitted(false);
// setUserData(null);
// }}>
// <Icon
// name="plus"
// size={moderateScale(20)}
// color="black"
// />
// </Button>
// </View>
// </View>
// );
// },
// )}
// </View>
// );
// }
// },
// [createUserRelationMutation, userData],
// );
// const addContact = React.useCallback(
// (id: Number) => {
// console.log('Whats the Id', id);
// createUserRelationMutation({
// variables: {
// input: { relatedUserId: id, type: RelationType.Contact, userId: 30 },
// },
// });
// },
// [createUserRelationMutation],
// );
const getContactId = React.useCallback(
(data: UsersLazyQueryHookResult) => {
//resetForm();
if (data) {
if (data.users.nodes.length == 0) {
Alert.alert('No User Found');
} else {
setUserData(data);
}
}
},
//[addContact],
[],
);
const [loadUsers] = useUsersLazyQuery({
onCompleted: getContactId,
onError: _onLoadUserError,
});
const handleSubmitForm = React.useCallback(
(values: FormValues) => {
setIsSubmitted(true);
const plusSign = '+';
const newPhoneNumber = plusSign.concat(values.phoneNumber);
console.log('Submitted');
loadUsers({
variables: {
where: { phoneNumber: newPhoneNumber },
},
});
resetForm();
},
[loadUsers],
);
// if (!addingContactLoading && isMutationCalled) {
// if (addingContactError) {
// Alert.alert('Unable to Add Contact');
// }
// }
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.searchTopContainer}>
<View>
<View style={styles.searchFieldContainer}>
<View style={styles.form}>
<Item underline style={styles.newFieldInput} >
<Icon name="mobile" color="black" size={26}></Icon>
<Input
onChangeText={handleChange('phoneNumber') as (text: string) => void}
onBlur={handleBlur('phoneNumber') as (event: any) => void}
value={values.phoneNumber}
placeholder="49152901820"
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button
block
danger
bordered
style={styles.button}
// onPress={() => navigation.goBack()}
//disabled={!isValid || !dirty}
//disabled={isSubmitting}
onPress={resetForm}
>
<Text>Abbrechen</Text>
</Button>
<Button
block
success
// disabled={!isValid || !dirty}
onPress={handleSubmit}
style={styles.button}>
<Text>Speichern</Text>
</Button>
</View>
</View>
</View>
{/* {isSubmitted && showUsers(userData)} */}
<User data={userData}></User>
</View>
</View>
</SafeAreaView>
);
};
export const AddContactTry:React.FunctionComponent=（）=>{
const validationSchema=phoneNumberValidationSchema；
const{values，handleChange，handleSubmit，dirty，handleBlur，isValid，resetForm，isSubmitting，setSubmitting，toucted}=useFormik({
初始值：{
电话号码：“”，
},
//isInitialValid:错，
验证模式，
onSubmit：（值：FormValues）=>{
handleSubmitForm（值）；
},
});
console.log（'isDirty'，dirty）；
console.log（'isValid'，isValid）；
console.log（'phone num'，value.phoneNumber）；
console.log（'提交状态'，isSubmitting）；
const[isSubmitted，setIsSubmitted]=useState（false）；
const[userData，setUserData]=useState（“”）；
const navigation=useNavigation（）；
const\u onLoadUserError=React.useCallback（（错误：ApolloadError）=>{
Alert.Alert（'Oops，稍后再试'）；
}, []);
//常数[
//CreateUserRelationVariation，
// {
//数据：添加联系人数据，
//加载：添加触点加载，
//错误：添加ContactError，
//叫:叫,，
// },
//]=UseCreateUserRelationSpection({
//未完成：（）=>{
//警报。警报（“添加联系人”）；
// },
// });
//const showUsers=React.useCallback(
//（数据：UsersLazyQueryHookResult）=>{
//如果（数据）{
//返回(
//
//{data.users.nodes.map(
//（项目：{firstName:string；lastName:string；id:number}）=>{
//const userName=item.firstName
//.concat（“”）
//.concat（项目名称）；
//返回(
//
//
//{userName}
//
// {
////添加联系人（编号（item.id））；
//setIsSubmitted（false）；
//setUserData（空）；
// }}>
//
//
//
//
// );
// },
// )}
//
// );
// }
// },
//[CreateUserRelationSpection，userData]，
// );
//const addContact=React.useCallback(
//（身份证号码）=>{
//console.log（'什么是Id'，Id）；
//CreateUserRelationVariation({
//变量：{
//输入：{relatedUserId:id，类型：RelationType.Contact，userId:30}，
// },
// });
// },
//[CreateUserRelationBartation]，
// );
const getContactId=React.useCallback(
（数据：UsersLazyQueryHookResult）=>{
//resetForm（）；
如果（数据）{
if（data.users.nodes.length==0）{
Alert.Alert（“未找到用户”）；
}否则{
setUserData（数据）；
}
}
},
//[addContact]，
[],
);
const[loadUsers]=useUsersLazyQuery({
未完成：getContactId，
OneError:_onLoadUserError，
});
const handleSubmitForm=React.useCallback(
（值：FormValues）=>{
setIsSubmitted（true）；
常量plusSign='+'；
const newPhoneNumber=plusSign.concat（values.phoneNumber）；
console.log（'Submitted'）；
负荷用户({
变量：{
其中：{phoneNumber:newPhoneNumber}，
},
});
resetForm（）；
},
[loadUsers]，
);
//如果（！addingContactLoading&&isMutationCalled）{
//如果（添加ContactError）{
//Alert.Alert（'无法添加联系人'）；
// }
// }
返回(
void}
onBlur={handleBlur（'phoneNumber'）as（事件：any）=>void}
value={values.phoneNumber}
占位符=“49152901820”
/>
navigation.goBack（）}
//disabled={！isValid | |！dirty}
//已禁用={isSubmitting}
onPress={resetForm}
>
取消
斯皮切恩
{/*{isSubmitted&&showUsers（userData）}*/}
);
};
导出常量用户：React.FunctionComponent=({
数据，
//提交，
}) => {
log（'user called'）；
常数[
CreateUserRelationVariation，
{
数据：添加联系人数据，
加载：添加触点加载，
错误：添加ContactError，
叫:叫,，
},
]=UseCreateUserRelationSpection({
未完成：（）=>{
警报。警报（“添加联系人”）；
},
});
const addContact=React.useCallback(
（身份证号码）=>{
console.log（'什么是Id'，Id）；
CreateUserRelationVariation({
变量：{
输入：{relatedUserId:id，类型：RelationType.Contact，userId:1}，
},
});
},
[CreateUserRelationBartation]，
);
如果（！addingContactLoading&&isMutationCalled）{
如果（添加ContactError）{
Alert.Alert（'无法添加联系人'）；
}
}
如果（！data）返回空值；
返回(
{data.users.nodes.map(
export const User: React.FunctionComponent<UserProps> = ({
data,
//isSubmitted,
}) => {
console.log('user called');
const [
createUserRelationMutation,
{
data: addingContactData,
loading: addingContactLoading,
error: addingContactError,
called: isMutationCalled,
},
] = useCreateUserRelationMutation({
onCompleted: () => {
Alert.alert('Contact Added');
},
});
const addContact = React.useCallback(
(id: Number) => {
console.log('Whats the Id', id);
createUserRelationMutation({
variables: {
input: { relatedUserId: id, type: RelationType.Contact, userId: 1 },
},
});
},
[createUserRelationMutation],
);
if (!addingContactLoading && isMutationCalled) {
if (addingContactError) {
Alert.alert('Unable to Add Contact');
}
}
if (!data) return null;
return (
<View style={styles.users}>
{data.users.nodes.map(
(item: { firstName: string; lastName: string; id: number }) => {
const userName = item.firstName.concat(' ').concat(item.lastName);
return (
<View style={styles.item} key={item.id}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<Text style={styles.userName}>{userName}</Text>
<View style={styles.addButtonContainer}>
<Button
rounded
style={styles.addButton}
onPress={() => {
addContact(Number(item.id));
//setIsSubmitted(false);
//setUserData(null);
}}>
<Icon name="plus" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
},
)}
</View>
);
};