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

在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.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状态，并且能够集中处理响应数据，使得代码更加清晰有条理。