DataGrid не отображается внутри вкладок с filterValues

Question

Я пытаюсь воспроизвести компонент с вкладками и соответствующими фильтрами, такими как OrderList в демо act-admin (учетные данные admin / пароль ).Источник можно найти здесь .

Я сделал следующее:

import React, { Fragment } from "react";
import {      
  List,
  TextField,
  Datagrid
} from "react-admin";
import Divider from "@material-ui/core/Divider";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";        

class TabbedDatagrid extends React.Component {
  tabs = [
    { id: 1, name: "in service" },
    { id: 2, name: "scrapped" },
    { id: 3, name: "locked" }
  ];

  state = { service: [], scrapped: [], locked: [] };  

  static getDerivedStateFromProps(props, state) {
    if (props.ids !== state[props.filterValues.conditionId]) {
      return { ...state, [props.filterValues.conditionId]: props.ids };
    }
    return null;
  }

  handleChange = (event, value) => {
    const { filterValues, setFilters } = this.props;
    setFilters({ ...filterValues, conditionId: value });
  };

  render() {
    const { classes, filterValues, ...props } = this.props;
    return (
      <Fragment>
        <Tabs
          variant="fullWidth"
          centered
          value={filterValues.conditionId}
          indicatorColor="primary"
          onChange={this.handleChange}
        >
          {this.tabs.map(choice => (
            <Tab key={choice.id} label={choice.name} value={choice.id} />
          ))}
        </Tabs>
        <Divider />
          <div>
            {filterValues.conditionId === 1 && (
              <Datagrid {...props} ids={this.state.service}>
                <TextField source="id" />                  
              </Datagrid>
            )}
            {filterValues.conditionId === 2 && (
              <Datagrid {...props} ids={this.state.scrapped}>
                <TextField source="id" />                  
              </Datagrid>
            )}
            {filterValues.conditionId === 3 && (
              <Datagrid {...props} ids={this.state.locked}>
                <TextField source="id" />                  
              </Datagrid>
            )}
          </div>
      </Fragment>
    );
  }
}

const RollList = ({ classes, ...props }) => (
  <List
    title="Roll Inventory"
    {...props}
    filterDefaultValues={{ conditionId: 1 }}
    sort={{ field: "name", order: "ASC" }}
    perPage={25}
  >
    <TabbedDatagrid />
  </List>
);

export default RollList;

Когда я запускаю этот код:

Я вижу это

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

Я использую следующие (соответствующие) зависимости:

"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"ra-data-json-server": "^2.8.0",
"react": "^16.8.4",
"react-admin": "^2.8.1",
"react-dom": "^16.8.4",
"react-scripts": "^2.1.8"

Кто-нибудь знает, что я могу с этим сделать?

Answer 1

Я нашел решение:

Я увидел, что единственным отличием от демо-списка response-admin OrderList является то, что id вкладок - это строка, тогда как в моем коде это целое число (как в моих данныхПоставщик).

Я изменил свой код, а также мои данные, чтобы быть строкой в ​​качестве идентификатора вместо целого числа.

tabs = [
  { id: 'service', name: 'in service' },
  { id: 'scrapped', name: 'scrapped' },
  { id: 'locked', name: 'locked' }
];

, а также в части условия далее

{filterValues.conditionId === 'service' && (
  <Datagrid {...props} ids={this.state.service}>
    {//...}
  </DataGrid>
)}

... чтобы не забыть значение по умолчанию в оболочке RollList в конце

filterDefaultValues={{ conditionId: 'service' }}

сейчас оно работает.

Спасибо всем, кто задумался над этим.

Приветствия.