reactjs - 使用 .map 并收到警告：道具类型失败：道具 `to` 在 `Link` 中标记为必需，但其值为 `undefined`

Question

当我打开导航栏时收到此警告警告：道具类型失败：道具to在 中标记为必需Link，但其值为undefined。

我正在为这个项目使用 material-ui 我正在使用 .map 来创建不同的链接

{menuItems.map((lsItem, key) => (
    <ListItem button key={key} component={Link} to={menuItems.listPath}>
       <ListItemIcon className={classes.listItem}>
          {lsItem.listIcon}
       </ListItemIcon>
       <ListItemText primary={lsItem.listText} className={classes.listItem} />
    </ListItem>
))};

这是他们被拉出来的地方

const menuItems = [
    {
        listIcon: <Home />,
        listText: 'Home',
        listPath: '/'
    },
    ...
];

如果我对链接进行硬编码，我不会收到警告。我包括to={...}但无法弄清楚为什么我会收到此警告，谢谢您的任何意见！

标签： reactjsmaterial-uijsxreact-router-dom

Answer 1

更改to={menuItems.listPath}为to={lsItem.listPath}：

                {menuItems.map((lsItem, key) => (
                    <ListItem button key={key} component={Link} to={lsItem.listPath}>
                        <ListItemIcon className={classes.listItem}>
                            {lsItem.listIcon}
                        </ListItemIcon>
                        <ListItemText primary={lsItem.listText} className={classes.listItem} />
                    </ListItem>
                ))};