React中模态框打开时条件调用API及TS2304报错处理

• 违反React Hook调用规则：Hook必须在组件顶层作用域调用，不能放在条件判断、循环、嵌套函数内，否则会导致Hook调用顺序紊乱，触发运行异常
• 变量作用域问题：movement 是你在if (show)的块级作用域内声明的变量，分支外部的JSX渲染代码无法访问该变量，直接触发TS2304未定义错误
• 逻辑错误：你在if (show)分支内直接返回了data，模态框渲染逻辑在该分支之后，show为true时组件会直接返回数据而不会渲染模态框DOM，完全不符合需求
• 拼写错误：代码中变量名拼写不一致，一会写mouvement一会写movement，也会触发未定义错误

你使用的Redux Toolkit Query查询Hook本身自带skip参数，用来控制请求是否触发，完全不需要把Hook放到条件分支里。同时RTK Query默认会对相同参数的请求做缓存，其他组件调用同一个useGetAllMovementsByTiersQuery传入相同参数时，会直接复用缓存的结果，满足你跨组件复用数据的需求。

修正后的完整代码如下：

import React from 'react';
import { Modal } from 'react-bootstrap';
import FormResolveDispute from '../forms/form-resolve-dispute';
import { useGetAllMovementsByTiersQuery } from '../../services/EventApi';

const ModalResolveEvent = (props: any) => {
  const {show, onClose, dispute} = props;
  // 组件顶层调用Hook，通过skip参数控制只有show为true时才发起请求
  const { movement } = useGetAllMovementsByTiersQuery(
    {
      qp: new URLSearchParams({
        eventId: dispute.id,
      }).toString(),
    },
    {
      // show为false时跳过请求，true时才发起
      skip: !show,
      selectFromResult: ({data}) => ({
        movement: data?.items || [],
      }),
    }
  );

  return (
    <>
      <Modal show={show} onHide={onClose} centered={true} scrollable={true}>
        <Modal.Header closeButton>
          <Modal.Title className="text-title">
            Test
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* 直接传入movement即可，show为false时movement是空数组不影响渲染 */}
          <FormResolveDispute
            mvts={movement}
            submitCallback={onClose}
          />
        </Modal.Body>
      </Modal>
    </>
  );
};

export default ModalResolveEvent;

内容的提问来源于stack exchange，提问作者Greg-A