材質UI選項卡-TypeError：無法讀取未定義的屬性'charAt'

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：無法讀取未定義的屬性'charAt'

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來放置map鍵。

關於如何使其工作的任何建議？

PS：有關選項卡的更多信息，請參見此處 。

Answer 1

簡而言之-您可以在“標簽”本身上指定“關鍵”道具。

Materialial-UI將“其他”道具“傳播”到根。

代替：

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

做：

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