inside map

Question

我找不到问题的答案，所以我必须在这里发一个问题。为什么第二张地图中的<Route>组件不起作用？它获取数据但不构建<Route>组件。来自第一张地图的<Route>有效。也许这是一个简单的解决方案，但我找不到一个。

const {genres} = this.state;
return(
<React.Fragment>
<Switch>
    {!_.isUndefined(genres) &&
        genres.map(g => {
            if(_.isEmpty(g.subgenres)) return <Route path={g.link} component={Page} key={g._id}/>;
            else g.subgenres.map(sub => <Route path={sub.link} component={Page} key={sub._id}/>);
        })
    }
</Switch>
</React.Fragment>
);

数据结构示例：

genres = [
    {
        "_id":"823710",
        "name":"Rock",
        "subgenres":[
            {
                "_id":"29033",
                "name":"Heavy Metal",
                "link":"/heavy-metal"
            },
            {
                ... other data ...
            }
        ],
        "link":""
    },
    {
        ... other data ...
    }
]

谢谢！

Answer 1

你没有在else分支中返回任何内容。添加return关键字，它应该按预期工作。

genres.map(g => {
  if (_.isEmpty(g.subgenres)) {
    return <Route path={g.link} component={Page} key={g._id} />;
  } else {
    return g.subgenres.map(sub => (
      <Route path={sub.link} component={Page} key={sub._id} />
    ));
  }
})