React.js 应用程序在开发模式下工作正常，但在构建后出现错误（生产模式）

Question

错误

好吧，我已经好几个小时试图找出为什么会出现此错误（仅在运行构建时）：

架构

Current directory is MySuperProject/src/Components/
Other non usefull files and directories are omitted.
.
├── Rentals                             
│   ├── modals
│   │   └── AddRentalModal.js            Not usefull here
│   ├── RentalListItem.js                https://pastebin.com/QSBncsHw
│   └── RentalsList.js                   https://pastebin.com/QufkCm85
├── Table
│   ├── Table.js                         https://pastebin.com/sq1jBPg1
└── Utils
    └── axios.util.js                    Not usefull here, axios setting

环境

• NodeJS：15.2.0
• ReactJS：16.13.1
• 纱线：1.22.5

我做什么

在我的主文件 RentalsList.js 中，我：

1. 从我的 API 上的 /rentals 获取有关 componentDidMount() 的一些数据
2. 使用 API 的答案更新状态
3. 使用RentalListItem (./RentalListItem.js) 作为该表的项目显示组件(../Table/Table.js)。为此，我将 RentalListItem 作为道具传递给命名的 TableItem。

表格组件是这样调用的：

<Table
  columns={columns}            // Columns of my table
  datas={this.state.rentals}   // Data I got from my API
  TableItem={RentalListItem}   // TableItem which is imported from ./RentalListItem.js
/>

以下是 API 返回的数据示例：

[
   {
      "name":"Some name",
      "ref":"AB01234",
      "availability_date": 1605237860,
      "cost": 123.45,
      "type": 0,
      "status": "Available",
      "_id":"5f667cb47919fda09795ccad",
      "address":{
         "number": 1,
         "way_type": "street",
         "way_name": "name",
         "postal_code": 12345,
         "city": "StackyCity",
         "_id":"5fadfc0e2add5eb934c497bb"
      },
      "added_by":{
         "firstname":"Me",
         "lastname":"Andmyself",
         "_id":"5fac8ca0b86ee219381252eb",
         "agency":{
            "ref": "CD56789",
            "name": "agency name",
            "email": "an@email.com",
            "_id":"5fac8f3db86ee219381252ec"
         }
      }
   }
]

我的问题

我在开发模式下运行它时没有任何错误。确实，我只有在构建代码后才会出现这个错误（用于生产环境）

为什么在生产模式下会出现这个错误？

研究轨迹

• 我注意到在yarn build 之后，我的组件RentalListItem 呈现为函数t(e)，但是当我尝试将它作为函数调用时，它告诉我这是一个类。好吧:)

• 当直接调用 RentalListItem 作为 RentalsList 上的组件时，我没有错误

• 在 Table.js 中，this.props.TableItem 在被调用时似乎定义良好

Answer 1

我怀疑它与这个 JSX 有关：

<this.props.TableItem index={index} ... />

试着这样写：

const TableItem = this.props.TableItem

...

<TableItem index={index} ... />

我相信您的代码是有效的 JSX，但使用这样的点表示法并不常见，而且我的理论是构建过程的某些部分错误地转换了它。为了准确了解造成这种情况的原因，我们需要知道您的构建设置是什么样的。