material-ui 表不显示数据

Question

您好，我正在使用 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>

        </>
    );
}

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

非常感谢。

Answer 1

这与你的数据结构有关。

{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

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

Answer 2

您似乎没有从 .map 函数返回任何内容。

试试这个：

export default function PhaseList() {

    const classes = useStyles();

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

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

    return (
        <>
            <ul>
                {phases.map((phase) =>
                    return(<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) => (
                            return(<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>

        </>
    );
}

这是 .map 函数的 reference