web-dev-qa-db-ja.com

ESLint：コンポーネント定義にdisplayName（react / display-name）がありません

Antdでreactフックコンポーネントを使用しています。テーブルの列を設定すると、レンダリング関数によってESLintエラーが発生します。

ESLint：コンポーネント定義にdisplayName（react/display-name）がありません

DisplayNameをオブジェクトに追加しようとしましたが、これは機能しません。

エラーは次のようになります。 enter image description here

これはコードです：

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

誰か助けてもらえますか？

これが完全なコンポーネントコードです（関連するビットだけです）

import * as SettlementConstants 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 = {
  settlements: PropTypes.object.isRequired,
}

function Settlements(props) {

  const [selectedSettlementRows, setSelectedSettlementRows] = useState([])

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

  function getSettlementDetails() {
    props.dispatch({
      type: SettlementConstants.GET_SETTLEMENT_PAYMENT_SUMMARIES,
      params: {
        'group_by': 'country_code',
        'type': SettlementConstants.CLAIM_SETTLEMENT,
      }
    })
    props.dispatch({
      type: SettlementConstants.GET_SETTLEMENT_PAYMENTS,
      params: {'type': SettlementConstants.CLAIM_SETTLEMENT, }
    })
  }

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

  function getCountForCountry(country_code){
    let selected_country = selectedSettlementRows.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={SettlementConstants.LABEL_SETTLEMENT_SUMMARY}>
        <Table
          columns={columns_payment_summary_table}
          bordered={true}
          dataSource={props.settlements.settlement_payment_summaries}
          loading={props.settlements.settlement_payment_summaries_pending && !props.settlements.settlement_payment_summaries}
          rowKey={record => record.group}
        />
      </Card>
    </div>
  )
}

Settlements.propTypes = propTypes

const mapStateToProps = (state) => {
  return {settlements: state.settlementsReducer}
}

export default connect(
  mapStateToProps,
)(Settlements)
javascriptreactjsantdreact-hooks
2
Leo Farmer

ESLintは、名前を設定せずに新しいコンポーネントを定義していると見なします。

これは、ESLintが レンダープロップパターン を認識できないためです。これは、このレンダープロップをコンポーネントではなくオブジェクトに直接書き込んでいるためです。

renderプロップを<Column>コンポーネントのjsx実装に直接配置するか、次のようにしてESLintのエラーをシャットダウンすることができます。

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>
        ),
    }
]

お役に立てば幸いです;）

5
Loïc Goyet

renderキーに通常の関数を使用すると、警告を無効にすることなく、ESLint警告も削除されます。

const columns_payment_summary_table = [ 
    {
        title: SettlementConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        render: function countForCountry(text) {
            return <span>{getCountForCountry(text)}</span>
        },
    }
]
4
kagundajm