乐闻世界logo
搜索文章和话题

How to use the response of useMutation in react-query to display data?

7 个月前提问
5 个月前修改
浏览次数26

1个答案

1

在React Query中,useMutation钩子用于触发异步函数(如API调用),并且可以接收一些回调函数来处理过程中的各种状态,比如成功、错误或者变化。要在页面上显示useMutation的响应数据,你可以通过这个钩子提供的状态和回调函数来实现。

以下是一个步骤明确的例子,展示如何使用useMutation并在页面上显示响应数据:

  1. 创建异步函数:首先,你需要定义一个执行异步操作的函数,它通常是一个API调用,这个函数应当返回Promise。
javascript
const 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(); };
  1. 使用useMutation钩子:在组件内,使用useMutation钩子并传入上一步创建的异步函数。
javascript
import { useMutation } from 'react-query'; function MyComponent() { const mutation = useMutation(createItem); // ... }
  1. 在页面上触发Mutation:在组件内,通过用户交互(如点击按钮)来触发mutation。
javascript
<button onClick={() => mutation.mutate({name: 'New Item'})}> Create Item </button>
  1. 显示响应数据:使用useMutation钩子返回的状态和数据来在页面上显示结果。可以通过mutation.isLoadingmutation.isErrormutation.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.isLoadingmutation.isErrormutation.isSuccess来判断当前状态,相应地显示加载提示、错误信息或成功信息。响应数据通过mutation.data访问,并显示在页面上。

通过这种方式,React Query让状态管理变得简单,不必手动管理loading或error状态,并且能够集中处理响应数据,使得代码更加清晰有条理。

2024年6月29日 12:07 回复

你的答案