时间戳

首页 > 解决方案 > material-ui 表不显示数据

reactjs - material-ui 表不显示数据

问题描述

您好，我正在使用 material-ui 尝试一些东西，但在从我的 react-context 显示我的数据时遇到了问题。我想做的是在 material-ui 表中显示我的上下文（这是一个数组）。这不是上下文的问题，因为当我打印出数组时，里面有带有值的元素。所以它必须是材料表类的问题。如果有人熟悉这些，我将不胜感激。

这是我的表格组件。我正在使用该map()函数两次遍历我的数组。一次在 return-statement 的顶部进行测试，该语句起作用，然后在 material-ui 组件中进行测试，该组件不起作用（没有显示任何数据）。

export default function PhaseList() {

    const classes = useStyles();

    const [phases, setPhases] = useContext(PhasesContext);

    useEffect(() => {
        console.log('retrieving phases', phases);
    }, [phases]);

    return (
        <>
            <ul>
                {phases.map((phase) =>
                    <li key={phase.id}>
                        {JSON.stringify(phase)}
                    </li>
                )}
            </ul>
            <TableContainer component={Paper}>
                <Table className={classes.table} size='small'>
                    <TableHead>
                        <TableRow>
                            <TableCell>phase</TableCell>
                            <TableCell>name</TableCell>
                            <TableCell>time</TableCell>
                            <TableCell>description;</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {phases.map((phase) => (
                            <TableRow key={phase.id}>
                                <TableCell component='th' scope='phase'>
                                    {phase.name}
                                </TableCell>
                                <TableCell>{phase.name}</TableCell>
                                <TableCell>{phase.time}</TableCell>
                                <TableCell>{phase.description}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>

        </>
    );
}

没有错误或任何东西，当我单击按钮添加它时，它只会创建一个空行，如您在此处看到的那样。具有值的元素打印在顶部，但不在表格中。我在控制台中唯一得到的是这个警告：警告：列表中的每个孩子都应该有一个唯一的“关键”道具。 在此处输入图像描述

提前非常感谢。

标签： reactjsmaterial-ui

解决方案

它与您的数据结构有关。

{phases.map((phase) => (
                            <TableRow key={phase.phase.id}>
                                <TableCell component='th' scope='phase'>
                                    {phase.phase.name}
                                </TableCell>
                                <TableCell>{phase.phase.name}</TableCell>
                                <TableCell>{phase.phase.time}</TableCell>
                                <TableCell>{phase.phase.description}</TableCell>
                            </TableRow>
                        ))}

您需要更改phase.name为phase.phase.name

现在你知道了，你可能想要编辑你的数据结构。

推荐阅读