在使用 react-apollo 发生 Mutation 错误后,我如何 'reset' React 组件?
How do I 'reset' a React component after a Mutation error with react-apollo?
我正在学习 Apollo Server 和 Apollo Client 并遵循一些在线示例。我见过的一种范例是 apollo-react 突变在
之后做这样的事情
render() {
const {props: {history}} = this
const {state: {username, password}} = this
return <Mutation mutation={REGISTER}
onCompleted={() => history.push('/login')}>
{(register, {data, error, loading}) => {
if (error) {
return <div>{error.toString()}</div>
}
if (loading) return <div>Loading...</div>
return ({JSX form, etc})
它工作正常,当我遇到错误时——例如,在我重复注册的情况下——我得到的是错误消息,而不是正常的 JSX。我不知道该怎么做才能 'reset' 页面。也就是说,我希望能够采取一些措施 'clear' Mutation 的错误,并让它返回到错误到达之前呈现 JSX(用户可以采取措施或我将错误计时,然后 'reset' 页面)。如果我刷新页面它工作正常,但显然我不想那样做!
我进行了一些搜索,立即发现自己正在深入讨论 Apollo Client Cache,它是我列表中的下一个要学习的内容。目前,我想知道是否有更简单的方法来完成我想做的事情。
非常感谢任何线索!
最简单的解决方案可能是使用 React 组件的状态来保存从突变返回的错误。然后提供用户操作来清除它。
扩展你的例子,它可能看起来像这样:
render() {
const {props: {history}} = this
const {state: {username, password, registrationError}} = this
if (registrationError) {
return (
<div>
{registrationError.toString()}
<button onClick={() => this.setState({registrationError: null})}>
Clear Error
</button>
</div>
);
}
return <Mutation mutation={REGISTER}
onCompleted={() => history.push('/login')}
onError={(error) => this.setState({registrationError: error})}>
{(register, {data, error, loading}) => {
if (error) {
// Just in case this is hit, return null
return null;
}
if (loading) return <div>Loading...</div>
return ({JSX form, etc})
请注意,错误呈现已移出 Mutation
回调。
我不太确定
我正在学习 Apollo Server 和 Apollo Client 并遵循一些在线示例。我见过的一种范例是 apollo-react 突变在
之后做这样的事情render() {
const {props: {history}} = this
const {state: {username, password}} = this
return <Mutation mutation={REGISTER}
onCompleted={() => history.push('/login')}>
{(register, {data, error, loading}) => {
if (error) {
return <div>{error.toString()}</div>
}
if (loading) return <div>Loading...</div>
return ({JSX form, etc})
它工作正常,当我遇到错误时——例如,在我重复注册的情况下——我得到的是错误消息,而不是正常的 JSX。我不知道该怎么做才能 'reset' 页面。也就是说,我希望能够采取一些措施 'clear' Mutation 的错误,并让它返回到错误到达之前呈现 JSX(用户可以采取措施或我将错误计时,然后 'reset' 页面)。如果我刷新页面它工作正常,但显然我不想那样做!
我进行了一些搜索,立即发现自己正在深入讨论 Apollo Client Cache,它是我列表中的下一个要学习的内容。目前,我想知道是否有更简单的方法来完成我想做的事情。
非常感谢任何线索!
最简单的解决方案可能是使用 React 组件的状态来保存从突变返回的错误。然后提供用户操作来清除它。
扩展你的例子,它可能看起来像这样:
render() {
const {props: {history}} = this
const {state: {username, password, registrationError}} = this
if (registrationError) {
return (
<div>
{registrationError.toString()}
<button onClick={() => this.setState({registrationError: null})}>
Clear Error
</button>
</div>
);
}
return <Mutation mutation={REGISTER}
onCompleted={() => history.push('/login')}
onError={(error) => this.setState({registrationError: error})}>
{(register, {data, error, loading}) => {
if (error) {
// Just in case this is hit, return null
return null;
}
if (loading) return <div>Loading...</div>
return ({JSX form, etc})
请注意,错误呈现已移出 Mutation
回调。
我不太确定