reactjs - React JS Unreachable 代码 no-unreachable

Question

我正在学习 React.js。我大约 2 天前搜索了我的问题的解决方案，但我不知道问题是什么。

render() {
return (
  <div>
    {
      this.state.menus.map((item_main, index_main) => {
        return (<h1 key={item_main.main_name}>{item_main.main_name}</h1>);
           var subs = this.state.menus[index_main].subs.map((item_sub, index_sub) => {
             return(<h4 key={item_sub.sub_name}>{item_sub.sub_name}</h4>)
           })

       })
    }
  </div>
);

如果我将“return”替换为“console.log”，它在控制台中看起来不错，但在网络上不会出现。

Answer 1

代码中无法访问的方面部分来自这样一个事实，即一旦您 return ，那么它下面的行将不会执行。在这种情况下:

var subs = this.state.menus[index_main].subs.map((item_sub, index_sub) => {
  return(<h4 key={item_sub.sub_name}>{item_sub.sub_name}</h4>)
 })

永远不会与返回一起运行。这就是导致您的 no-unreachable 的原因要触发的 linter 错误。

从你的帖子来看，你想要的行为有点模棱两可，但我最好的猜测是你想要一个 <h1>对于每个项目，后跟 <h4>对于您的每个子菜单项。在这种情况下，您的代码应如下所示:

render() {
return (
  <div>
    {
      this.state.menus.map((item_main, index_main) => {
           var subs = this.state.menus[index_main].subs.map((item_sub, index_sub) => {
             return(<h4 key={item_sub.sub_name}>{item_sub.sub_name}</h4>)
           });
            return (
              <div>
                <h1 key={item_main.main_name}>{item_main.main_name}</h1>
                {subs}
              </div>
            );

       })
    }
  </div>
);

您还可以使用 <Fragment>作为外包装，但为了简单起见，我没有在此处包含它。