React中如何基于useQuery钩子值重渲染组件？Error组件未触发求助

1. 排查Error组件内部的props处理逻辑 #

最常见的问题是Error组件没有正确响应openModal props的变化：

• 如果组件内部用useState维护模态框状态但未同步props更新，比如：

  // 错误写法
  const Error = ({ openModal }) => {
    const [isOpen, setIsOpen] = useState(openModal);
    return <Modal open={isOpen} />;
  };
  

  改成直接用props控制，或通过useEffect同步状态：

  // 写法1：直接依赖props
  const Error = ({ openModal }) => {
    return <Modal open={openModal} />;
  };
  
  // 写法2：同步props到内部state
  const Error = ({ openModal }) => {
    const [isOpen, setIsOpen] = useState(openModal);
    useEffect(() => {
      setIsOpen(openModal);
    }, [openModal]);
    return <Modal open={isOpen} />;
  };
  

2. 验证error判断条件的准确性 #

在组件中添加日志，确认error的实际值和判断逻辑是否正确：

const { data, isFetching, error } = useGetUserProfileQuery();
console.log('当前error:', error);
console.log('error !== null:', error !== null);

如果error初始状态是undefined而非null，可以把判断条件改成error != null（同时匹配null和undefined），或直接用Boolean(error)。

3. 检查RTK Query的错误配置 #

如果在createApi时自定义了transformErrorResponse，要确认转换后的错误结构符合预期：

// 示例：自定义错误转换需保证返回结构可被正确识别
const api = createApi({
  baseQuery: fetchBaseQuery({ 
    baseUrl: '/',
    transformErrorResponse: (response) => ({
      status: response.status,
      data: response.data
    })
  }),
  endpoints: (builder) => ({
    getUserProfile: builder.query({
      query: () => '/profile',
    }),
  }),
});

若错误被包装成其他结构，需调整判断逻辑（比如error?.status === 400）。

4. 避免请求过程中的状态干扰 #

RTK Query在请求中（isFetching为true）可能会重置error状态，建议结合isFetching判断：

{!isFetching && <Error openModal={error != null} />}

5. 简化组件渲染逻辑 #

你当前重复渲染了Error组件，改成直接传递布尔值，避免不必要的组件卸载/挂载：

<Error openModal={error != null} />

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