Question

我试图让Material UI标签工作，我有这个组件：

const ItemssOverview = ({ details }) => {
    if (details && details.items) {
        return (
            <div>
                <AppBar position="static" color="default">
                    <Tabs
                        onChange={this.handleChange}
                        indicatorColor="primary"
                        textColor="primary"
                        scrollable
                        scrollButtons="auto"
                    >
                        {
                            details.items.map(item => {
                                return (
                                    <div key={item.id}>
                                        <Tab label={item.Name} />
                                    </div>
                                );
                            })
                        }
                    </Tabs>
                </AppBar>
            </div>
        );
    }

    return (<div>&nbsp;</div>);
};

我想动态生成标签数量，最好在详细信息列表中。但是，使用上面的代码我得到了这个错误：

TypeError：无法读取属性＆＃39; charAt＆＃39;未定义的

capitalizeFirstLetter
C:/Development/Repos/IP/operations-mo-dashboard/src/mo-dashboard/node_modules/material-ui/utils/helpers.js:30
  27 | function capitalizeFirstLetter(string) {
  28 |   process.env.NODE_ENV !== "production" ? (0, _warning2.default)(typeof string === 'string', 'Material-UI: capitalizeFirstLetter(string) expects a string argument.') : void 0;
  29 | 
> 30 |   return string.charAt(0).toUpperCase() + string.slice(1);
  31 | } //  weak
  32 | 
  33 | function contains(obj, pred) {

我认为这是因为<Tabs/>期望看到<Tab/>标记，而不是div，但我需要该div来放置地图密钥。

有关如何使其发挥作用的任何建议？

PS：有关标签的更多信息，请参阅here。

Answer 1

简而言之 - 您在“Tab”本身上指定“key”道具。

Meterial-UI "spreads"根的“其他”道具。

而不是：

<div key={item.id}>
  <Tab label={item.Name} />
</div>

执行：

<Tab key={item.id} label={item.Name} />

Material UI标签 - TypeError：无法读取属性＆＃39; charAt＆＃39;未定义的

1 个答案: