在React Query中,useMutation
钩子用于触发异步函数(如API调用),并且可以接收一些回调函数来处理过程中的各种状态,比如成功、错误或者变化。要在页面上显示useMutation
的响应数据,你可以通过这个钩子提供的状态和回调函数来实现。
以下是一个步骤明确的例子,展示如何使用useMutation
并在页面上显示响应数据:
- 创建异步函数:首先,你需要定义一个执行异步操作的函数,它通常是一个API调用,这个函数应当返回Promise。
javascriptconst createItem = async (newItem) => { const response = await fetch('/api/items', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(newItem), }); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); };
- 使用
useMutation
钩子:在组件内,使用useMutation
钩子并传入上一步创建的异步函数。
javascriptimport { useMutation } from 'react-query'; function MyComponent() { const mutation = useMutation(createItem); // ... }
- 在页面上触发Mutation:在组件内,通过用户交互(如点击按钮)来触发mutation。
javascript<button onClick={() => mutation.mutate({name: 'New Item'})}> Create Item </button>
- 显示响应数据:使用
useMutation
钩子返回的状态和数据来在页面上显示结果。可以通过mutation.isLoading
、mutation.isError
、mutation.isSuccess
等状态来展示不同的界面,并通过mutation.data
来访问响应数据。
javascript// ... // 在页面中显示结果 if (mutation.isLoading) { return <div>Creating item...</div>; } if (mutation.isError) { return <div>An error occurred: {mutation.error.message}</div>; } if (mutation.isSuccess) { return <div>Item created: {JSON.stringify(mutation.data)}</div>; } // 提交按钮 return ( <> <button onClick={() => mutation.mutate({name: 'New Item'})}> Create Item </button> {mutation.status === 'success' ? <div>Item created: {JSON.stringify(mutation.data)}</div> : null} </> ); // ...
在上述代码中,我们通过mutate
函数触发Mutation,并通过mutation.isLoading
、mutation.isError
和mutation.isSuccess
来判断当前状态,相应地显示加载提示、错误信息或成功信息。响应数据通过mutation.data
访问,并显示在页面上。
通过这种方式,React Query让状态管理变得简单,不必手动管理loading或error状态,并且能够集中处理响应数据,使得代码更加清晰有条理。
2024年6月29日 12:07 回复