Реагируйте с таблицей материалов и инструментами редуктора

Question

Я учусь реагировать на разработку. Я создаю приложение, используя Reaction и Redux. Недавно я добавил в свой проект material-ui и material-table, и кажется, что таблица материалов переопределяет мои редукционные действия и состояния в Redux DevTools. Само приложение работает нормально. Проблема только в Redux DecTools. Я пытался гуглить, но безуспешно. Спасибо за любые подсказки или указания.

Когда я использую таблицу материалов, я вижу это в Redux devtools

В случае, если вместо этого я использую MUIDataTable, я вижу мои редуксы Чау Хонза

Answer 1

Это мой компонент таблицы материалов:

import React, { useEffect, useState } from 'react';
import MaterialTable from "material-table";

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

const MyTable = () => {

    return (
        <div style={{ maxWidth: "100%" }}>
        <MaterialTable   icons={tableIcons}     
          columns={[

            { title: "Department", field: "department" },
            { title: "Name", field: "name" },
            { title: "Status", field: "status" },
            { title: "Start Date", field: "startDate", type: "date" },

          ]}
          data={[]}
          title="Demo Title"
        />
      </div>
    )

}

export default MyTable;

Answer 2

Кажется, ты хочешь увидеть свои штаты. Вы можете просмотреть свои состояния, перейдя к нему с помощью выпадающего меню в верхнем правом углу, где написано «Экземпляры автоматического выбора».

Answer 3

Да, таблица материалов изменяет данные путем добавления объекта tableData к нему.

Это давно известная проблема, но автор пока не хочет ее менять.

лучший способ справиться с этим, это сделать поверхностную копию ваших данных перед передачей их в таблицу, чтобы предотвратить мутацию избыточных данных:

const tableData = data.map(row => ({...row}));

И обернуть это в useState / useEffect только для выполнения это, если данные изменяются.

PR и Обсуждение