- 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/
我在 Nuxt 项目旁边使用 Firebase,在下面的插件中,我调用 onAuthStateChanged 来检查用户是否已经登录,如果他是,我设置用户状态并将他重定向到仪表板如下: import
这两个代码块都可以工作,即使它们使用不同的等号,一个使用 :=,另一个使用 =。哪个是正确的,为什么?我认为 tidyeval 在使用 dplyr 函数时需要 := ,但奇怪的是 = 在我的 muta
下午好! 我做了一些快速搜索,我很难弄清楚我应该如何去做我需要做的事情。 对于这个程序,我们正在创建一个基本的工作票类。每个属性都有自己的修改器和访问器,但除此之外还有一个修改器将所有属性作为参数并一
所以我有一个名为 VIP 的模型,其中包含大量相关信息。因此,当我们转到路线 vip/{id} 时,我会返回大部分信息。但是,当我转到 vips/{per-page} 时,我不想返回所有数据,因为 A
我有一个电子应用程序,它使用 mysql 包直接连接到我的数据库。我想做的是将使用 mysql.createConnection() 创建的 connection 对象存储在 Vuex 状态中。然后我
假设我有一个 Image 类,我想提供一些图像操作,比如缩放、旋转等。我想为每个操作提供两种类型的功能。一种修改对象,另一种不修改。在 Ruby 中,有些函数以 !并指出这个将修改参数。 因为这在 C
以下代码利用 DOM 突变事件 DOMNodeInserted检测 body 的存在元素并包裹它的 innerHTML放入 wrapper 中。 functi
我正在尝试从 Firestore 初始化我的 Vuex 商店。最后一行代码 context.commit('SET_ACTIVITIES', acts) 是产生错误的原因。我不认为我在直接改变状态,因
所以基本上我已经阅读了相当多的教程、演示和 API 规范本身,但并没有深入了解,非常感谢你们的帮助。 我最近一直在努力更好地掌握 IndexedDB,但遇到了一些问题,希望对这段代码提出一些批评/反馈
我有这个简单的示例代码: var request = mozIndexedDB.open('MyTestDatabase'); request.onsuccess = function(event){
我定义了一个 Vuex 存储( Action 、状态、突变和 getter) 当我在突变中向状态数组添加新的待办事项时,出现以下错误:错误:[vuex] 不要在突变处理程序之外改变 vuex 存储状态
事前:我的应用程序按预期工作,但我想知道是否有更好的方法来解决我遇到的问题。 情况:我有一个项目,目前正在实现权限系统。当前的流程是加载特定对象(在本例中让我们采用 user),然后注入(inject
这段代码 extension Collection { mutating func f() { removeFirst() } } 处理错误 cannot use mutating m
我们在 R 中有以下数据框 # Create example dataframe df % dplyr::mutate(col1A = ifelse(gp == 0, col1B, col1A))
在我的 NUXT 应用程序中,我正在使用 vuex 存储模块!当我运行应用程序并调用时 this.$store.dispatch('userStore/setLoggedInUser',current
所以我有这个数据集 # A tibble: 268 x 1 `Which of these social media platforms do you have an account in ri
转载请注明出处: 在 Vuex 中 store 数据改变的唯一方法就是提交 mutations 。 mutations 里面装着一些改变数据方法的集合,这是Vuex 设
我想用不同的变量多次调用一个函数,每次都为数据框中的一个新变量设置一个值。这是我失败的尝试。感谢您的帮助! dat % mutate({{var3}} := ifelse({{var1}} >
改变列表的正确方法是什么?在这种特定情况下,列表由 split 返回。 library(dplyr) csv%split(.,.$participant_number)%>%mutate(.,var(
在某些语言中比其他语言更难(或不可能)实现变异测试吗?例如,是否可以在功能编程语言中实现变异测试? 最佳答案 我看不出任何语言都无法做到的任何理由。 我当然不是专家,但是我认为使用功能语言进行突变测试
我是一名优秀的程序员,十分优秀!