- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个removeUser 页面,我在其中使用
submitForm()
函数进行错误处理。这段代码运行得非常好:
export default function RemoveUserPage() {
const [isSubmitted, setIsSubmitted] = useState(false);
const [isRemoved ,setIsRemoved] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
function StatusMessage(){
if (isRemoved){
return (
<CustomAlert severity='success' text='User Removed'></CustomAlert>
)
}
//else...
}
function submitForm(RemoveUserMutation: any, email: string) {
setIsSubmitted(true);
RemoveUserMutation({
variables: {
email: email,
},
}).then(({ data }: any) => {
setIsRemoved(true);
})
.catch((error: { message: string; }) => {
setIsRemoved(false);
console.log("Error msg:" + error.message);
setErrorMessage(error.message)
})
}
return (
<Mutation mutation={RemoveUserMutation}
>
{(RemoveUserMutation: any) => (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<Formik
initialValues={{ email: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}
>
{props => {
const {
values: { email },
errors,
touched,
handleChange,
isValid,
setFieldTouched
} = props;
const change = (name: string, e: any) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
};
return (
<div className='main-content'>
<form style={{ width: '100%' }}
onSubmit={e => {e.preventDefault();
submitForm(RemoveUserMutation, email)}}>
<div>
<TextField
variant="outlined"
margin="normal"
id="email"
name="email"
helperText={touched.email ? errors.email : ""}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, "email")}
/>
<br></br>
<Button
type="submit"
disabled={!isValid || !email}
>
Remove User</Button>
</div>
</form>
<br></br>
{isSubmitted && StatusMessage()}
</div>
)
}}
</Formik>
</div>
)}
</Mutation>
);
}
但是,建议我改用useMutation
。首先,我无法这样做,因为我收到这样的错误:
Unhandled Rejection (Error): GraphQL error: Variable `email` of type `String!` must not be null.
即使突变有效,在我的情况下,我仍然可以修改并使用相同的函数进行错误处理吗?
这就是我现在正在尝试的方法,但这不起作用:
export default function RemoveUserPage() {
const [isSubmitted, setIsSubmitted] = useState(false);
const [isRemoved ,setIsRemoved] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [removeUser] = useMutation(RemoveUserMutation);
function StatusMessage(){
if (isRemoved){
return (
<CustomAlert severity='success' text='User Removed'></CustomAlert>
)
}
}
function submitForm(RemoveUserMutation: any, email: string) {
setIsSubmitted(true);
RemoveUserMutation({
variables: {
email: email,
},
}).then(({ data }: any) => {
setIsRemoved(true);
})
.catch((error: { message: string; }) => {
setIsRemoved(false);
setErrorMessage(error.message)
})
}
return (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<Formik
initialValues={{ email: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}
>
{props => {
const {
values: { email },
errors,
touched,
handleChange,
isValid,
setFieldTouched
} = props;
const change = (name: string, e: any) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
};
return (
<div className='main-content'>
<form style={{ width: '100%' }}
onSubmit={e => {e.preventDefault();
removeUser({variables: {todo: email }});}}>
<div>
<TextField
variant="outlined"
margin="normal"
id="email"
name="email"
helperText={touched.email ? errors.email : ""}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, "email")}
/>
<br></br>
<Button
type="submit"
disabled={!isValid || !email}
>
Remove User</Button>
</div>
</form>
<br></br>
{isSubmitted && StatusMessage()}
</div>
)
}}
</Formik>
</div>
);
}
最佳答案
没有理由再使用 RemoveUserMutation
—— removeUser
已经在范围内,所以只需使用它即可。
function submitForm(email: string) {
setIsSubmitted(true);
removeUser({
variables: {
email,
},
})
...
}
您可以继续使用 submitForm
函数,如下所示:
onSubmit={e => {
e.preventDefault();
submitForm(email);
}}
这一行
removeUser({variables: {todo: email }})
不起作用,因为没有 todo
变量。由于您使用 TypeScript,因此您应该为查询生成类型定义,然后将它们与 Hook 一起使用。这可以防止类似的错误。
关于javascript - 将 <Mutation> 改为 useMutation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60789149/
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章详解dedecms后台编辑器将回车 改为 的方法由作者收集整理,如果你对
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 6 年前。 Improve th
不是将代码放在正文的头部或末尾(我把它放在正文的末尾),如果我将代码放在 JS 文件中而不是在 html 中它自己的脚本标记,是否可以? (我假设它像任何其他代码一样工作正常,但我问以防万一) 最佳答
我尝试执行从\e 命令编写的查询,但现在我无法执行任何查询,但可以在 PSQL 中执行命令。 现在我注意到这一点,我输入的命令现在在\e 中。 当我关闭\e(尝试运行它)时问题开始了。 最佳答案 ps
我有一个这样的字符串($ 字符总是被其他字符包围): a$b c$d e$f 我希望我的字符串方法在 $ 前面放置一个 \ 并删除换行符: a\$bc\$de\$f 我试过了,但它没有放入 \ 字符:
我需要使用 Java 构建一个 XML 文件。问题是我必须使用一些特殊字符,例如“ć”,然后在我的移动应用程序中读取它。 如果我手动更改 ć 就可以正常工作至 ć在我的 XML 文件中的记事
我有一个removeUser 页面,我在其中使用,然后使用submitForm() 函数进行错误处理。这段代码运行得非常好: export default function RemoveUserPag
我在数据库 “2048-05-21” 中有一个看起来像这样的日期 我只想得到年份,在这一年我只想得到两个后面的数字并将两个前面的数字更改为19 example: data : 2048-05-21 1
public class Venus1 { public static void main(String args[]) { int[]x={1,2,3};
我有以下 PHP 脚本,现在我需要在 JavaScript 中做同样的事情。 JavaScript 中是否有类似于 PHP 函数的函数,我已经搜索了好几天但找不到类似的东西?我想做的是计算某个单词在数
这个问题在这里已经有了答案: Is it bad practice to specify an array size using a variable instead of `#define` in
我陷入了一种情况,我必须通过“选中”工具栏中的复选框来“选中”列表中存在的所有复选框。 这是创建复选框列表的代码:- itemTpl: 'checked="checked" /> {groupName
我正在使用Python3。在分析一些网站时,我遇到了一些奇怪的字符并寻找解决方案。我找到了一个,但在找到解决方案之前,我尝试了一些方法,并且知道我无法重置它。当我使用 Jupyter 笔记本将列表 l
我在 http 下有 unity android app 和 site api 的工作基础设施。 最近换了服务器,申请了ssl证书。现在我的 api 在 https 下。 在 unity 应用程序中,
我在 http 下有 unity android app 和 site api 的工作基础设施。 最近换了服务器,申请了ssl证书。现在我的 api 在 https 下。 在 unity 应用程序中,
我在 Objective-C 中有一些代码。我想,我收到了 NSString 类型,但是当我尝试将它保存在核心数据中时,我得到了一个 user.clientID = clientID; 错误,例如:
在表中我有一个名为 CallTime 的字段 (Varchar)。 包括晚上8:00、晚上8:40、上午10:00等时间 我想将字段类型更改为“时间”并更新时间格式。该怎么做? 谢谢 最佳答案 UPD
这个问题在这里已经有了答案: C# - for Loop Freezes at strange intervals (3 个答案) 关闭 6 年前。 我试图解决 problem #14 from P
我今天在 Pycharm 社区版 5.0.3 中收到了这个错误,想知道这是否只是我做错了/没有意识到,或者是 PyCharm lint 问题。重现错误的代码是 mylist = list() # fi
我的目标是将数据库中的随机文本显示到网页上。首先,我不知道为什么我的数据没有保存,为什么我得到的是[Entity of type sec.helloweb.HelloMessage with id:
我是一名优秀的程序员,十分优秀!