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

Posted 2023-02-22

【中文标题】反应错误 - 检查`t`的渲染方法

【英文标题】：React error - check the render method of `t`

【发布时间】：2020-05-19 21:20:28

【问题描述】：

我从 material-ui 表切换到 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 来制作自定义标题，这就是警告首次出现的时候。除此之外，它按预期运行。

第 33 行是第一个 customHeadRender

像往常一样，提前谢谢

【问题讨论】：

我猜，因为您在数据中有自定义渲染功能，您需要将key 属性添加到这些元素。即每列的customHeadRender: () => (<th key="order_id"...>...</th>)。该自定义渲染函数也可能获得一些道具，因此您可以通过它访问列的 name 属性，而不是复制/粘贴原始字符串，例如customHeadRender: (props) => (<th key=props.name...>...</th>)我不知道，试着打印道具，看看有没有，如果有，里面有什么用作唯一标识符

感谢您回复@Jayce444。是的，我尝试过类似的方法 - customHeadRender: (value, i) => (

value)，但我仍然收到同样的错误。明天上班时，我会尝试打印道具

k 听起来不错。使用您的方法，除非他们将索引作为第二个参数传递，否则所有键的 i 将是 undefined，因此所有键都具有相同的键，然后您将收到错误：P 打印出第一个arg 看看那里有什么，如果有的话。否则可能只需要复制粘贴列名，看看是否有效

【参考方案1】：

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

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