Сетка не загружается при открытии модального

#reactjs #react-bootstrap #use-effect #react-table

Вопрос:

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

Я попытался добавить зависимость movement в useEffect , но это не inifinity loops так .

если я посмотрю на консоль, я увижу, что API вызывается при открытии, но подключение к API через сетку не выполняется при первом вызове.

если у вас есть решение этой проблемы?

вот компонент, который загружает сетку :

 const GridTest = (props: {  tiersRef: string;  masterRef: string;  event: any;  submitCallback: any;  }) =gt; {  const [rows, setRows] = useStatelt;any[]gt;([]);   const columns: Column[] = useMemo(  () =gt; [  {  Header: () =gt; (  lt;I18nWrapper translateKey="movement.uniqueReference.fieldNameShort" /gt;  ),  accessor: 'uniqueRef',  },  {  Header: () =gt; lt;I18nWrapper translateKey="movement.type.fieldName" /gt;,  accessor: 'type',  disableSortBy: true,  Cell: ({ value }) =gt; (  lt;I18nWrapper translateKey={value} prefix="movement.type" /gt;  ),  }, ], []  );   const { movement } = useGetAllMovementsByTiersQuery(  {  masterRef: props.masterRef,  qp: new URLSearchParams({  tiersRef: props.tiersRef,  eventId: props.promise.id,  }).toString(),  },  {  selectFromResult: ({ data }) =gt; ({  movement: data?.items || [],  }), }  );   useEffect(() =gt; {  setRows(movement);  }, []);   return (  lt;gt;  lt;sectiongt;  lt;SimpleGrid columns={columns} rows={rows} /gt;  lt;/sectiongt; lt;/gt;  ); };  GridTest.defaultProps = {  submitCallback: () =gt; { /*form submit*/  }, };  export default GridTest;