ReactJS编写onInputChange时报缺分号、函数未找到错误求助

问题现象 #

• 开发ReactJS业务逻辑编写onInputChange相关代码时，首先触发MISSING SEMI-COLONE（缺少分号）语法报错
• 按照编辑器提示在对应位置补充分号后，又出现onInputChange not Found（onInputChange未找到）的引用报错

报错截图 #

• 初始缺少分号报错：
  
• 补充分号后的方法未找到报错：
  

问题根因与解决方法 #

这类连续报错的核心原因是第一个语法错误直接打断了Babel/打包工具的抽象语法树解析流程，后续的方法注册、作用域绑定逻辑完全没有执行，才会抛出后续的"方法未找到"错误，不需要被第二个报错误导，单独去排查onInputChange的定义问题。

具体排查修复步骤：

1. 回到第一次报缺少分号的代码位置，不要机械在报错行末尾补分号：
   • 检查报错位置附近的语法：如果是类组件，检查onInputChange方法定义前后有没有错误加多余逗号、有没有漏写类方法的语法格式、JSX上的事件绑定有没有拼错内置事件名；如果是函数组件，检查const onInputChange = () => {}的写法是否完整，有没有漏写等号、箭头函数的箭头，这类语法问题编辑器经常误判为"缺少分号"。
   • 重点检查JSX部分有没有标签未闭合、属性绑定漏写花括号的问题，这类问题的报错提示经常和实际出错位置偏差1-2行。
2. 修正语法错误后，清除编译缓存、重启本地开发服务，旧的编译缓存经常会导致代码修正后仍然抛出之前的作用域错误。
3. 确认语法编译完全正常后，再核对onInputChange的作用域绑定：
   • 类组件确认方法做了正确的this绑定，要么在构造函数中绑定，要么直接写成类属性箭头函数
   • 函数组件确认onInputChange的定义位置在组件返回JSX之前，不存在const定义变量的时序问题
   • JSX上的事件绑定写法为onChange={onInputChange}，不要漏写花括号，也不要额外加执行括号导致渲染阶段直接执行函数。

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