React 错误 - 检查 `t` 的渲染方法

Question

我从 material-ui table 切换到 MuiDataTable 因为它易于使用，但我看到了一个警告，即使该组件按预期运行。话虽如此，警告困扰着我。

组件代码如下：

import React from "react";
import CsvDownload from 'react-json-to-csv'
import MUIDataTable from "mui-datatables";
import { messageService } from "../services/order-item-service";

export default class OrderItemComponent2 extends React.Component {
  state = {
    data: [],
    _columns: [],
    Header: [],
    totalCount: 10,
    options: {
      pageSize: 16,
      page: 0,
      filterType: "dropdown",
      selectableRows: false,
      responsive: "scroll",
      resizableColumns: true,
      key: ""
    }
  };

  componentDidMount() {
    this.subscription = messageService.getMessage().subscribe((message) => {
        let result = message;
        this.setState({ data: result.message });
        this.setState({ Header: [
          {
            name: 'order_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head first-col'>Order Id</th>
              ),
              customBodyRender: (value, i) => (
              <span>{ value }</span>
              )
            }
          },
          {
            name: 'order_item_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sec-col'>Order Item</th>
              )
            }
          },
          {
            name: 'product_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head bg-col'>Prod ID</th>
              )
            }
          },
          {
            name: 'code_division',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head thr-col'>Div</th>
              )
            }
          },
          {
            name: 'code_product',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Prod Code</th>
              )
            }
          },
          {
            name: 'quantity_due',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Qty Due</th>
              )
            }
          },
          {
            name: 'quantity_shipped',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Qty Sh</th>
              )
            }
          },
          {
            name: 'price',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Price</th>
              )
            }
          },
          {
            name: 'date_shipped',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Dt Sh</th>
              )
            }
          },
          {
            name: 'date_due',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Dt Due</th>
              )
            }
          },
          {
            name: 'customer_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head bg-col'>Cust ID</th>
              )
            }
          },
          {
            name: 'ship_via',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Ship Via</th>
              )
            }
          },
          {
            name: 'value_due',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Val Due</th>
              )
            }
          },
          {
            name: 'value_shipped',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Val Sh</th>
              )
            }
          },
          {
            name: 'date_order',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Dt Or</th>
              )
            }
          },
          {
            name: 'date_modified',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head bg-col'>Dt Mod</th>
              )
            }
          }] 
        });

        this.setState({
          totalCount: Math.ceil(this.state.data.length / this.state.pageSize)
        });

    });
  }

  componentWillUnmount() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }

  getOrderItem() {
    this.setState({ data: messageService.getMessage() });
  }

  render() {

    return (
      <div>
        <CsvDownload className='btn btn-primary' data={ this.state.data } />

        <MUIDataTable
        title="Order Item"
        data={this.state.data}
        columns={this.state.Header}
        options={this.state.options}
      />
      </div>
    );
  }
}

如您所见，我正在使用 customHeadRender 进行自定义 headers，那是第一次出现警告的时候。除此之外，它按预期运行。

第33行是第一个customHeadRender

像往常一样，提前致谢

Answer 1

我必须在 componentDidMount() 函数中初始化 header（列名）

import React from "react";
import CsvDownload from 'react-json-to-csv'
import MUIDataTable from "mui-datatables";
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from '../theme';
import { messageService } from "../services/order-item-service";

export default class OrderItemComponent2 extends React.Component {
  state = {
    data: [],
    _columns: [],
    Header: [],
    totalCount: 10,
    counter: 0,
    options: {
      pageSize: 16,
      page: 0,
      filterType: "dropdown",
      selectableRows: false,
      responsive: "scroll",
      resizableColumns: true,
      className: this.name
    }
  };

  componentDidMount() {
    this.subscription = messageService.getMessage().subscribe((message) => {
        let result = message;

        this.setState({ data: result.message });
        this.setState({ Header: [
          {
            label: "Order ID",
            name: 'order_id',
            options: {
              className: 'first-col'
            }
          }, 
          {
            label: "Item ID",
            name: 'order_item_id',
            options: {
              className: 'sec-col'
            }
          },
          {
            label: "Prod ID",
            name: 'product_id',
            options: {
              className: 'bg-col'
            }
          },
          {
            label: "Div",
            name: 'code_division',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Prod Code",
            name: 'code_product',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Qty Due",
            name: 'quantity_due',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Qty Sh",
            name: 'quantity_shipped',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Price",
            name: 'price',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Dt Sh",
            name: 'date_shipped',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Dt Due",
            name: 'date_due',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Cust ID",
            name: 'customer_id'
          },
          {
            label: "Ship Via",
            name: 'ship_via',
            options: {
              className: 'bg-col'
            }
          },
          {
            label: "Val Due",
            name: 'value_due',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Val Sh",
            name: 'value_shipped',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Dt Or",
            name: 'date_order',
            options: {
              className: 'bg-col'
            }
          },
          {
            label: "Dt Mod",
            name: 'date_modified',
            options: {
              className: 'bg-col'
            }
          }] });

        this.setState({
          totalCount: Math.ceil(this.state.data.length / this.state.pageSize)
        });

    });
  }

  componentWillUnmount() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }

  getOrderItem() {
    this.setState({ data: messageService.getMessage() });
  }

  render() {

    return (
      <div>
        <CsvDownload className='btn btn-primary' data={ this.state.data } />
        <MuiThemeProvider theme={theme}>
          <MUIDataTable
          title="Order Item Table"
          data={ this.state.data }
          columns={ this.state.Header }
          options={ this.state.options }
        />
        </MuiThemeProvider>
      </div>
    );
  }
}

React 错误 - 检查 `t` 的渲染方法

React error - check the render method of `t`

reactjs

mui-datatable