Рендеринг ячейки компонента каркаса сетки AG не обновляет реквизиты

Я создаю функциональный компонент реакции с AgGridReact:

const DataGrid = (props) =>
{                                                                           
   const [gridRowData, setGridRowData] = useState([]);
   const [columnDefinition, setColumnDefinition] = useState([]);

useEffect(async () =>
    {
      if(props.name && props.name !== "")
      {
        ... get grid row data and column definition here according to props.name - working fine
      }
    },[props.name]);

let frameworkComponents = {
  customLoadingOverlay: LoadingOverlayTemplate,
      customNoRowsOverlay: UxDataGridCustomNoRows,
      editButton: params => <ViewAndDeleteSetting {...params}  
          openAddConfigurationsWindow={openAddConfigurationsWindow}
          onDeleteSetting={onDeleteSetting} />
};
.
.
.
const onDeleteSetting = async () =>
{
  console.log("ON DELETE AND NAME IS: " + props.name ); //PRINTS AN EMPTY STRING
   ...
}

return (
  <AgGridReact
            columnDefs={columnDefinition} 
            rowData={gridRowData} 
            frameworkComponents={frameworkComponents}/>
);

Как вы можете видеть в комментарии в onDeleteSetting, имя остается пустым, когда вызывается этот обратный вызов. Рендеринг самой ячейки прекрасен, и ViewAndDeleteSetting действительно рендерится, просто кажется, что он рендерится только один раз, а не каждый раз при изменении имени. Как я могу вызвать повторный рендеринг внутреннего ViewAndDeleteSetting компонента с использованием самого последнего frameworkComponents?


reactjs ag-grid-react ag-grid
person Yonatan Nir    schedule 13.01.2021    source источник
comment
ваша функция onDeleteSetting читает реквизиты компонента agGrid, поэтому, если вы не обновите весь компонент новыми реквизитами, печать имени будет такой же. Я не понимаю, почему вы думаете, что имя изменится, но, возможно, попробуйте добавить аргументы в метод onDeleteSetting из компонента ViewAndDeleteSetting .   -  person Kaki Master Of Time    schedule 13.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Проблема заключалась в том, как я пытался передать реквизиты ViewAndDeleteSetting. Если вы хотите передать опору компоненту, отображаемому в ячейке, вы не должны делать это в frameworkComponents, но вам нужно сделать это в определении столбца следующим образом:

useEffect(() =>
{
  let columns = [{headerName: '', cellRenderer: 'editButton', width: 90, editable: false, 
                  cellRendererParams: {
                    openAddConfigurationsWindow: openAddConfigurationsWindow,
                    onDeleteSetting: onDeleteSetting
                }},
                .. other columns
                ]

  setColumnDefinition(columns);
},[props.name]);

Столбцы с cellRendererParams do воссоздаются в useEffect при изменении имени, а затем компонент может регулярно получать доступ к этим параметрам через свои реквизиты.

person Yonatan Nir    schedule 13.01.2021
comment
На какой версии ag-grid вы работаете? - person dsh; 14.01.2021
comment
@dsh только что установил его сегодня - 24.1.0 - person Yonatan Nir; 14.01.2021
comment
Я не думаю, что по своей сути невозможно передать реквизиты в frameworkComponent. Проблема заключалась в том, что ссылка была устаревшей и не обновлялась. Я думаю, вы сможете обойти это с помощью геттера, такого как getFrameworkComponents(props), который будет динамически вычислять при каждом рендеринге. Но ваше решение достигает той же цели. - person dsh; 29.01.2021
comment
Даже когда я использую useMemo, который в основном реализует мемоизированный получатель, как вы предложили, это не сработало - person Yonatan Nir; 30.01.2021