Блог

Я хотел бы, когда я открываю модальный, запускать службу только в том случае, если модальный открыт, и повторно использовать данные службы для другой инъекции в другой компонент.

Вот компонент :

 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;
if (show) {
    const {mouvement} = useGetAllMovementsByTiersQuery(
        {
            qp: new URLSearchParams({
                eventId: dispute.id,
            }).toString(),
        },
        {
            selectFromResult: ({data}) => ({
                movement: data?.items || [],
            }),
        }
    );
    return data;
}
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>
                <FormResolveDispute
                    mvts={mouvement}
                    submitCallback={onClose}
                />
            </Modal.Body>
        </Modal>
    </>
   );
 };

 export default ModalResolveEvent;
 

здесь я проверяю, стоит ли show true звонить

  if (show) {
   const {movement} = useGetAllMovementsByTiersQuery(
    {
        qp: new URLSearchParams({
            eventId: dispute.id,
        }).toString(),
    },
    {
        selectFromResult: ({data}) => ({
            movement: data?.items || [],
        }),
    }
);
return movement;
 

}

и я хотел бы внедрить движение в FormResolveDispute компонент.

    <FormResolveDispute mvts={movement} submitCallback={onClose} />
 

Но у меня есть следующее сообщение об ошибке

 TS2304: Cannot find name 'movement'.
 

Я хотел бы получить движение, сгенерированное в кондитонале, чтобы отправить его обратно в FormResolveEvent

Не могли бы вы сказать мне, в чем проблема или есть ли другой способ ?

Пожалуйста, попробуйте это.

 // create initial state
const [movement, setMovement] = useState([]);

if (show) {
const { movement } = useGetAllMovementsByTiersQuery(
    {
        qp: new URLSearchParams({
            eventId: dispute.id,
        }).toString(),
    },
    {
        selectFromResult: ({data}) => ({
            movement: data?.items || [],
        }),
    }
   );

// set state
setMovement(movement);
}
 

Таким образом, в этом компоненте реквизит движения-это получить из состояния

 <FormResolveDispute
     mvts={movement}
     submitCallback={onClose}
     />