reactjs中的组件定义缺少显示名称？

Question

我完成了我的项目。现在我正在尝试进行生产构建。但是我收到了名称"Component definition is missing display name" 的错误。我正在使用 nextjs。

从我的整个项目中只有两个组件，显示像图像一样的错误- Clikc to see the image。我在两个组件中都使用了 material-table-core 和 mui5。

我很困惑为什么会看到这个错误？

其中一个组件是-

import React from "react";
import { forwardRef } from "react";
import { Box, Stack, SvgIcon, Typography, ButtonBase, InputBase, Rating } from "@mui/material";
import { Star, ArrowDownward } from '@mui/icons-material';
import MaterialTable, { Column } from "@material-table/core";

//Custom Icon
import { DeleteIcon, ArrowUp, ArrowDown } from "Utilis/Icons";

//Theme
import theme from "Theme";

//Styles
import useStyles from "Styles/Common/DataTable.styles";

//Data
import cartData from "Data/Cart.data";

const DataTable = () => {
    const classes = useStyles();
    const columns = [
        { title: 'Product', field: 'product', cellStyle: { width: "75%" } },
        { title: 'Price', field: 'price', cellStyle: { width: "5%" } },
        { title: 'Quantity', field: 'quantity', cellStyle: { width: "10%" } },
        { title: 'Subtotal', field: 'subtotal', cellStyle: { width: "5%" } },
        { title: 'Remove', field: 'action', cellStyle: { width: "5%" } }
    ];
    const data = [];
    cartData && cartData.forEach(cart => {
        data.push({
            product: <Stack direction="row" sx={{ alignItems: "center" }}>
                <Box>
                    <Box component="img" className={classes.ProductImages} src={cart.product.images[0].url} alt="Product Image" />
                </Box>
                <Box>
                    <Typography className={classes.ProductTitle} variant="h6" component="h6">
                        {cart.product.name}
                    </Typography>
                    <Rating
                        name="half-rating-read"
                        defaultValue={5}
                        precision={4}
                        readOnly
                        className={classes.Star}
                        emptyIcon={<Star fontSize="inherit" />}
                    />
                </Box>
            </Stack>,
            price: <Typography className={classes.ProductPrice} variant="h6" component="h6">
                ${cart.product.price}
            </Typography>,
            quantity:
                <Box sx={{ position: "relative" }} className="sdfjshfggb">
                    <InputBase
                        className={classes.InputField}
                        value={cart.count}
                        type="text"
                    />
                    <Box className={classes.CounterButton}>
                        <ButtonBase>
                            <SvgIcon viewBox="0 0 23 13">
                                {ArrowUp}
                            </SvgIcon>
                        </ButtonBase>
                        <ButtonBase>
                            <SvgIcon viewBox="0 0 23 13">
                                {ArrowDown}
                            </SvgIcon>
                        </ButtonBase>
                    </Box>
                </Box>,
            subtotal:
                <Typography variant="h6" component="h6" className={classes.ProductPriceTotal}>
                    ${cart.product.price * cart.count}
                </Typography>,
            action:
                <ButtonBase className={classes.RemoveButton} >
                    <SvgIcon viewBox="0 0 24 24">{DeleteIcon}</SvgIcon>
                </ButtonBase >
        })
    })
    return (
        <Box className={classes.DataTable}>
            <MaterialTable
                columns={columns}
                data={data}
                options={{
                    search: false,
                    showTitle: false,
                    toolbar: false,
                    selection: true,
                    paging: false,
                    headerStyle: {
                        backgroundColor: theme.palette.primary.input_bg,
                        color: theme.palette.primary.main,
                    }
                }}
                localization={{
                    body: {
                        emptyDataSourceMessage: (
                            <Typography variant="body1" component="p">
                                Cart is Empty!
                            </Typography>
                        ),
                    },
                }}
                icons={{ SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />) }}
                onSelectionChange={(e) => console.log(e)}
            />
        </Box>
    );
};
export default DataTable;

我是 react/nextjs 的新手。这是我的第一个项目。谁能帮帮我？

Answer 1

您正在使用箭头功能。您可以切换到常规函数，这将解决 displayName 的问题，也可以在导出之前设置箭头函数的 displayName。直接导出箭头函数不会给组件一个 displayName。

DataTable.displayName = "DataTable"
export default DataTable;