ESLint:组件定义缺少 displayName (react/display-name) [英] ESLint: Component definition is missing displayName (react/display-name)

问题描述

我正在使用带有 antd 的 react 钩子组件.为表设置列时，渲染函数给我一个 ESLint 错误:

<块引用>

ESLint:组件定义缺少 displayName(反应/显示名称)

我尝试将 displayName 添加到对象中，但这不起作用.

这是错误的样子:

这是代码:

const columns_payment_summary_table = [{标题:FooConstants.LABEL_QUANTITY_SELECTED，数据索引:'组'，键:'组'，渲染:文本 =>(<span>{getCountForCountry(text)}</span>),}]

有人可以帮忙吗?

这是完整的组件代码(只是相关的部分)

import * as FooConstants from './constants'从react-redux"导入 {connect}从反应"导入反应，{useState，useEffect}从 'antd' 导入 {Card, Table}从 'prop-types' 导入 PropTypesconst propTypes = {foos: PropTypes.object.isRequired,}函数 Foos(props) {const [selectedFooRows, setSelectedFooRows] = useState([])useEffect(() => {getFooDetails()}, [])函数 getFooDetails() {props.dispatch({类型:FooConstants.GET_FOO_PAYMENT_SUMMARIES，参数:{'group_by': '国家代码',类型":FooConstants.CLAIM_FOO，}})props.dispatch({类型:FooConstants.GET_FOO_PAYMENTS，参数:{'type':FooConstants.CLAIM_FOO，}})}const columns_payment_summary_table = [{标题:FooConstants.LABEL_QUANTITY_SELECTED，数据索引:'组'，键:'组'，渲染:文本 =>(<span>{getCountForCountry(text)}</span>),}]函数 getCountForCountry(country_code){让 selected_country = selectedFooRows.filter(function(row){返回 row.group === country_code})if(selected_country && selected_country.length > 0){返回 selected_country[0].ids.length} 别的 {返回 0}}返回 (<div><卡片标题={FooConstants.LABEL_FOO_SUMMARY}><表列={columns_payment_summary_table}边框={真}数据源={props.foos.foo_payment_summaries}加载={props.foos.foo_payment_summaries_pending &&!props.foos.foo_payment_summaries}rowKey={记录=>记录.组}/></卡片>

)}Foos.propTypes = propTypesconst mapStateToProps = (状态) =>{返回 {foos: state.foosReducer}}导出默认连接(mapStateToProps，)(福斯)

解决方案

ESLint 认为您正在定义一个新组件，而没有为其设置任何名称.

这是因为 ESLint 无法识别 渲染道具模式，因为您不是直接将此渲染道具写入组件，但写入对象.

您可以将 render 属性直接放入 <Column> 组件的 jsx 实现中，或者通过这样做来关闭 ESLint 的错误:

const columns_payment_summary_table = [{标题:SettlementConstants.LABEL_QUANTITY_SELECTED，数据索引:'组'，键:'组'，//eslint-disable-next-line react/display-name渲染:文本 =>(<span>{getCountForCountry(text)}</span>),}]

我希望它有所帮助;)

I'm using a react hook component with antd. When setting up columns for a table, the render function is giving me an ESLint error:

ESLint: Component definition is missing displayName (react/display-name)

I've tried adding displayName to the object but this doesn't work.

This is how the error looks:

This is the code:

const columns_payment_summary_table = [ 
    {
      title: FooConstants.LABEL_QUANTITY_SELECTED,
      dataIndex: 'group',
      key: 'group',
      render: text => (
        <span>{getCountForCountry(text)}</span>
      ),
    }
  ]

Can anyone help?

Here is full component code (well just the relevant bits)

import * as FooConstants from './constants'
import {connect} from 'react-redux'
import React, {useState, useEffect} from 'react'
import {Card, Table} from 'antd'
import PropTypes from 'prop-types'

const propTypes = {
  foos: PropTypes.object.isRequired,
}

function Foos(props) {

  const [selectedFooRows, setSelectedFooRows] = useState([])

  useEffect(() => {
    getFooDetails()
  }, [])

  function getFooDetails() {
    props.dispatch({
      type: FooConstants.GET_FOO_PAYMENT_SUMMARIES,
      params: {
        'group_by': 'country_code',
        'type': FooConstants.CLAIM_FOO,
      }
    })
    props.dispatch({
      type: FooConstants.GET_FOO_PAYMENTS,
      params: {'type': FooConstants.CLAIM_FOO, }
    })
  }

  const columns_payment_summary_table = [
    {
      title: FooConstants.LABEL_QUANTITY_SELECTED,
      dataIndex: 'group',
      key: 'group',
      render: text => (
        <span>{getCountForCountry(text)}</span>
      ),
    }
  ]

  function getCountForCountry(country_code){
    let selected_country = selectedFooRows.filter(function(row){
      return row.group === country_code
    })

    if(selected_country && selected_country.length > 0){
      return selected_country[0].ids.length
    } else {
      return 0
    }
  }

  return (
    <div>
      <Card
        title={FooConstants.LABEL_FOO_SUMMARY}>
        <Table
          columns={columns_payment_summary_table}
          bordered={true}
          dataSource={props.foos.foo_payment_summaries}
          loading={props.foos.foo_payment_summaries_pending && !props.foos.foo_payment_summaries}
          rowKey={record => record.group}
        />
      </Card>
    </div>
  )
}

Foos.propTypes = propTypes

const mapStateToProps = (state) => {
  return {foos: state.foosReducer}
}

export default connect(
  mapStateToProps,
)(Foos)

解决方案

ESLint thinks you are defining a new component without setting any name to it.

This is explained because ESLint cannot recognize the render prop pattern because you are not directly writing this render prop into a component, but into an object.

You can either put the render prop directly into your jsx implementation of the <Column> component, or shut down the ESLint's error by doing this :

const columns_payment_summary_table = [ 
    {
        title: SettlementConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        // eslint-disable-next-line react/display-name
        render: text => (
            <span>{getCountForCountry(text)}</span>
        ),
    }
]

I hope it helped ;)

这篇关于ESLint:组件定义缺少 displayName (react/display-name)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！