React中return语句后代码提示不可达，求技术解决方案

问题出在JavaScript的**自动分号插入（ASI）**机制上：你在return语句后直接换行了，JS会自动在return末尾插入分号，导致括号里的<ProList>组件代码永远不会被执行，因此提示不可达。

修复方案 #

有两种常见的修复方式：

方式1：调整return与括号的位置

把return和紧跟的括号放在同一行，或者确保括号紧跟在return后面（无换行），避免ASI插入分号：

projcarddata.map((val, ind) => { 
  return (
    <ProList key={ind} imgsrc={val.imgsrc} title={val.title} text={val.text} view={val.view} source={val.source}/>
  );
})

方式2：使用箭头函数的隐式返回

去掉大括号和return语句，直接用括号包裹组件代码，箭头函数会自动返回括号内的内容：

projcarddata.map((val, ind) => (
  <ProList key={ind} imgsrc={val.imgsrc} title={val.title} text={val.text} view={val.view} source={val.source}/>
))

完整修复后的代码 #

import "./Workcard.css"
import React from 'react'

import ProList from "./ProList"
import projcarddata from "./ProlistData"

const Workcard = () => {
  return (
    <div className="work-container">
        <h1 className="project-heading">Projects</h1>
        <div className="project-container">
          {
            projcarddata.map((val, ind) => (
              <ProList key={ind} imgsrc={val.imgsrc} title={val.title} text={val.text} view={val.view} source={val.source}/>
            ))
          }
        </div>
    </div>
  );
};

export default Workcard

注意事项 #

在JavaScript中，return、break、continue这类语句后直接换行时，ASI机制会自动插入分号，导致后续代码被忽略。写这类语句时，要么把后续内容和语句放在同一行，要么用括号将后续内容包裹在同一缩进块内，避免触发ASI。

内容的提问来源于stack exchange，提问作者hlock23