Редактируемая таблица материалов в React работает со столбцами из локальной переменной, но не обновляет данные, тогда столбцы поступают из реквизита - PullRequest
0 голосов
/ 30 марта 2020

Я пытаюсь построить компонент таблицы данных с использованием таблицы материалов. Он должен извлекать столбцы и данные из реквизита и инициировать обратный вызов при редактировании.

Проблема заключается в том, что даже если состояние корректно обновляется при редактировании, в таблице всегда отображаются исходные данные при извлечении столбцов из реквизита. Если я объявляю столбцы как локальную переменную, она работает нормально.

Чтобы лучше изолировать проблему, я пытаюсь заставить ее работать, выводя столбцы из состояния.

Столбцы из состояния:

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>
  );
}

Я не понимаю разницы между этими вариантами, особенно между двумя последними, и не могу найти ресурсов, чтобы помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...