javascript - 从单独的组件重置条件渲染
问题描述
以前我使用该函数showUsers
并{isSubmitted && showUsers(userData)}
在 graphql 查询后有条件地呈现一些项目。在这种情况下,我正在使用
setIsSubmitted(false);
setUserData(null);
在按钮上重置数据并停止条件渲染。但是,现在我已经转移showUsers
到Users
一个单独的组件。在这种情况下,我想不出一种方法来传递setIsSubmitted
和setUserData
。我想修复它,以便在突变运行后,渲染应该消失。
注释掉的部分是我之前使用的。
export 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 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>
);
};
目前,如果突变成功,我会看到警报,但渲染的项目仍然存在。
解决方案
推荐阅读
- json - JSON 模式可以在对象或数组中指定所需的属性吗?
- swiftui - 将 EnvironmentObject 添加到 ViewModel SwiftUI 和 MVVM
- html - 如何消除由于照片而向左滚动的页面?
- java - 使用 Java 进行用户和组解析
- xml - 使用 Go 解析 XML 无法从单个标签中获取值
- python - Python文件处理坏格式显示
- python - 如何让管理员使用 Telethon 进行简单的聊天?
- javascript - 如何用链接替换单词
- python - 尝试创建一个带有倒计时的游戏,一旦单击特定按钮就会重置倒计时
- javascript - 我的分支逻辑中的点击事件问题