NextJS：如何在JSX中调用函数，实现Tanstack React Query提交成功后关闭模态框

你之前在JSX中直接写{isSuccess ? props.onClose : null}无效的核心原因是：JSX表达式仅会渲染值（字符串、React元素等），不会自动执行函数。这种写法只是把onClose函数作为无意义的值插入DOM，根本不会触发函数执行。

下面提供两种可靠的解决方案：

方案1：利用React Query的onSuccess回调（推荐） #

React Query的useMutation原生提供了onSuccess钩子，专门用于处理请求成功后的操作，完全贴合库的设计逻辑：

import { useMutation } from '@tanstack/react-query';

const YourModal = ({ onClose }) => {
  const { mutate } = useMutation({
    mutationFn: (formData) => {
      // 你的POST请求逻辑
      return fetch('/your-api-endpoint', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });
    },
    // 请求成功后直接调用关闭函数
    onSuccess: () => onClose(),
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = /* 收集你的表单数据 */;
    mutate(formData);
  };

  return (
    <div className="modal">
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        <button type="submit">提交</button>
      </form>
      <button onClick={onClose}>×</button>
    </div>
  );
};

如果需要根据不同提交场景做差异化处理，也可以在调用mutate时动态指定onSuccess：

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = /* 收集表单数据 */;
  mutate(formData, {
    onSuccess: () => onClose(),
  });
};

方案2：用React的useEffect监听isSuccess状态 #

如果需要结合其他状态逻辑判断是否关闭模态框，可以用useEffect监听isSuccess的变化，当状态变为true时触发关闭：

import { useEffect } from 'react';
import { useMutation } from '@tanstack/react-query';

const YourModal = ({ onClose }) => {
  const { mutate, isSuccess, reset } = useMutation({
    mutationFn: (formData) => {
      // 你的POST请求逻辑
      return fetch('/your-api-endpoint', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });
    },
  });

  // 监听isSuccess状态，成功时关闭模态框
  useEffect(() => {
    if (isSuccess) {
      onClose();
      // 可选：重置success状态，避免组件重渲染时重复触发关闭
      reset();
    }
  }, [isSuccess, onClose, reset]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = /* 收集表单数据 */;
    mutate(formData);
  };

  return (
    <div className="modal">
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        <button type="submit">提交</button>
      </form>
      <button onClick={onClose}>×</button>
    </div>
  );
};

注意：调用reset()是为了将isSuccess重置为false，避免后续组件因其他原因重渲染时，再次触发关闭逻辑。

内容的提问来源于stack exchange，提问作者FlameDra