Я пытаюсь построить компонент таблицы данных с использованием таблицы материалов. Он должен извлекать столбцы и данные из реквизита и инициировать обратный вызов при редактировании.
Проблема заключается в том, что даже если состояние корректно обновляется при редактировании, в таблице всегда отображаются исходные данные при извлечении столбцов из реквизита. Если я объявляю столбцы как локальную переменную, она работает нормально.
Чтобы лучше изолировать проблему, я пытаюсь заставить ее работать, выводя столбцы из состояния.
Столбцы из состояния:
export default function Table(props){
const [gridData, setGridData] = useState({
data: props.data,
columns: [
{ title: 'Parameters', field: 'param', editable: 'never' },
{ title: 'Value', field: 'val', editable: 'onUpdate' }
],
resolve: () => {}
});
useEffect(() => {
gridData.resolve();
}, [gridData]);
const onRowUpdate = (newData, oldData) =>
new Promise((resolve, reject) => {
const { data } = gridData;
const index = data.indexOf(oldData);
data[index] = newData;
setGridData({ ...gridData, data, resolve });
});
const { data } = gridData;
return (
<div>
<MaterialTable
columns={columns}
data={data}
editable={{
isEditable: rowData => true,
onRowUpdate: onRowUpdate
}}
/>
</div>
);
}
При извлечении столбцов из реквизита я просто делаю columns={props.col}
И единственный случай, когда это работает, - это когда я объявляю столбцы как локальную переменную следующим образом:
export default function Table(props){
...
const columns: [
{ title: 'Parameters', field: 'param', editable: 'never' },
{ title: 'Value', field: 'val', editable: 'onUpdate' }
],
...
return (
<div>
<MaterialTable
columns={columns}
...
/>
</div>
);
}
Я не понимаю разницы между этими вариантами, особенно между двумя последними, и не могу найти ресурсов, чтобы помочь.