Question

我正在尝试使用制表符并根据react-admin demo中的OrderList之类的过滤器来复制组件（凭据为 admin / password ）。来源here。

我要做的是以下事情：

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;

当我运行此代码时：

I see this

没有显示数据，尽管当我查看道具和右下角的记录数时，我可以看到数据在那里。控制台没有显示任何错误（除了缺少翻译）。

我正在使用以下（相关）依赖项：

"@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

我找到了解决方法：

我看到了与react-admin演示OrderList的唯一区别是Tabs的ID是一个字符串，而在我的代码中是一个整数（就像我的数据提供者一样）。

我将代码以及数据也更改为字符串（而不是整数）作为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' }}

现在可以正常工作了。

感谢所有对此进行考虑的人。

干杯。

DataGrid不会在带有filterValues的标签中显示

1 个答案: