React项目ChannelSearch.jsx出现Unexpected token expected "..."报错如何解决

报错根因 #

你的JSX属性写法不符合语法规范，触发解析错误：

• onChange属性和值之间缺少等号，JSX要求属性必须遵循属性名={属性值}的赋值格式，你写的onChange {onSearch}没有等号，解析器误以为你要做对象属性展开，因此抛出「预期...运算符」的语法错误。
• 无关的空行也会干扰解析器对标签结构的识别，value={query}和onChange属性之间的空行建议删除。

修复后的正确代码 #

<input 
  className='channel-search+__input__text' 
  placeholder='Search perhaps?' 
  type='text' 
  value={query}
  onChange={onSearch} 
/>

后续验证 #

修改后重新启动本地开发服务即可消除该语法报错。如果后续输入绑定不生效，可以检查query状态的声明逻辑、onSearch函数的事件处理逻辑是否符合React受控组件的规范要求。

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