#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;