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>作为外包装，但为了简单起见，我没有在此处添加。

React JS Unreachable代码无法访问

1 个答案: