React agrid flash первая строка в сетке, когда в сетке присутствует только одна запись

Я хочу прошить первую строку сетки. Моя сетка имеет только одну строку. Я хочу загрузить данные в сетку, а также прошить ячейку. У меня есть пример кода. Если вы заметили метод onInsertOne. Это не работает в первый раз, но работает, когда мы нажимаем кнопку во второй раз. Как прошить сотовый в первый раз.

        let items = [];
        gridAPI.forEachNode(function(rowNode, index) { 
            items.push(rowNode); --> row Node is empty for the first time.
        });

Я также пробовал getDisplayedRowAtIndex(0), но не повезло.

import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

import {useState, useRef, useEffect, useMemo, useCallback} from 'react';
import {createOneCarRecord} from './carFactory';

let gridAPI = null;
export const AppHighLightFirstRow = () => {
    const gridRef = useRef();
    const [rowData, setRowData] = useState(null);
    let cars = [];
    
    const [columnDefs, setColumnDefs] = useState([
        { field: 'type', sortable: true },
        { field: 'year' },
        { field: 'color' },
        { field: 'price' }
    ])

    const getRowId = useCallback( params => {
        return params.data.id;
      });

    const onInsertOne = useCallback( ()=> {
        const newRecord = createOneCarRecord();
        let cars = [newRecord];
        setRowData(cars);

        let items = [];
        gridAPI.forEachNode(function(rowNode, index) { 
            items.push(rowNode);
        });

        console.info(`Items Length to highLight =${items.length}`,items)
        gridAPI.flashCells({ rowNodes: items , flashDelay: 2000, fadeDelay: 1000});

      });

      const onGridReady = (params) => {
        params.api.hideOverlay();
        gridAPI = params.api;
      }

    return (
        <div className = "ag-theme-alpine" style = {{height: '100%'}}>
        <div><button onClick = {onInsertOne}>Insert One</button></div>
        <AgGridReact ref = {gridRef}
          enableCellChangeFlash = {true}
          getRowId = {getRowId}
          rowSelection = {'multiple'}
          rowData = {rowData} 
          animateRows = {true} 
          columnDefs = {columnDefs}
          onGridReady = {onGridReady}
          />
          </div>
    )
}
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
1
0
66
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать событие onRowDataUpdated

       <AgGridReact 
          ...
          onRowDataUpdated = {({api}) => {
             const items = [];
             api.forEachNode(function(rowNode) { 
                items.push(rowNode);
             });

             console.info(`Items Length to highLight =${items.length}`,items)
             api.flashCells({ rowNodes: items , flashDelay: 2000, fadeDelay: 1000});
          }}
       />
        

Другие вопросы по теме