PyCharm中React代码报错：代码无误却提示语法错误如何解决？

代码中的核心错误 #

你的代码存在多处语法和React使用规范问题，这是导致PyCharm报错的主要原因，具体错误和修正点如下：

• 类继承错误：React.component 应改为大写的 React.Component，React的组件类是大写开头的。
• 类方法定义错误：类组件内不能用function声明方法，需使用类字段语法（箭头函数）或类方法绑定this，否则不仅语法报错，还会导致this指向异常。
• JSX属性规范错误：
  • style属性必须传入对象而非字符串，需用双大括号包裹，比如style={{width: '40vh', backgroundColor: '#F6F8FA'}}
  • 所有自闭合标签（如input）必须以/>结尾，不能省略闭合部分
  • onClick事件需传入函数引用而非字符串，即onClick={this.send}而非onClick="send()"
• CryptoJS用法错误：MD5是哈希算法，没有encrypt方法，正确写法是CryptoJS.MD5(密码字符串).toString()
• 异步逻辑错误：alert应放在fetch的then回调内，否则请求未完成就会弹出提示，不符合业务逻辑

修正后的完整代码 #

import React from 'react'
import CryptoJS from 'crypto-js'

export class App extends React.Component {
  // 使用箭头函数确保this指向组件实例
  send = () => {
    const form = {
      email: document.getElementById('EmailInput').value,
      username: document.getElementById('UsernameInput').value,
      password: CryptoJS.MD5(document.getElementById('PasswordInput').value).toString(),
      emailSpam: document.getElementById('checkEmailSpam').checked
    }
    fetch('register', {
      method: 'POST', 
      body: JSON.stringify(form),
      headers: {'Content-Type': 'application/json'}
    })
      .then(data => data.json())
      .then(result => {
        console.log(result)
        alert('На ваш E-mail было выслано письмо с ссылкой для завершения регистрации. Все инструкции в письме.')
      })
      .catch(err => console.error(err))
  }

  render() {
    return (
      <div id="loginForm" className="card mt-5" style={{width: '40vh', backgroundColor: '#F6F8FA'}}>
        <form style={{textAlign: 'left'}}>
          <div className="mb-3 mt-3 ms-3 me-3">
            <label htmlFor="EmailInput" className="form-label">E-mail</label>
            <input type="email" className="form-control" id="EmailInput" placeholder="E-mail" />
          </div>
          <div className="mb-3 mt-3 ms-3 me-3">
            <label htmlFor="UsernameInput" className="form-label">Отображаемое имя</label>
            <input type="text" className="form-control" id="UsernameInput" placeholder="Никнейм" />
          </div>
          <div className="mb-3 ms-3 me-3">
            <label htmlFor="PasswordInput" className="form-label">Пароль</label>
            <input type="password" className="form-control" id="PasswordInput" placeholder="Пароль" />
          </div>
          <div className="form-check mb-3 ms-3 me-3">
            <input type="checkbox" className="form-check-input" value="" id="checkEmailSpam" checked />
            <label htmlFor="checkEmailSpam" className="form-check-label">
              Желаете ли вы получать новости Фонда МультиСны на корпоративную почту?
            </label>
          </div>
          <div className="d-grid gap-2 col-6 mx-auto">
            <button className="btn btn-success mb-3 mt-2" type="button" style={{backgroundColor: '#44c96b'}}
                    onClick={this.send}>Зарегестрироваться
            </button>
          </div>
        </form>
      </div>
    )
  }
}

PyCharm语法报错的解决办法 #

1. 确认JavaScript版本设置：
   打开Settings -> Languages & Frameworks -> JavaScript，将JavaScript版本设置为ECMAScript 6+或更高版本。
2. 启用JSX支持：
   • 如果文件后缀是.js，需在Settings -> Languages & Frameworks -> JavaScript -> JavaScript Language Version中，勾选React JSX
   • 建议将组件文件后缀改为.jsx，PyCharm会自动识别并启用JSX语法支持
3. 检查React插件：
   打开Settings -> Plugins，确认ReactJSX插件已安装并启用，若未安装则搜索安装后重启PyCharm。
4. 清除缓存重启：
   点击File -> Invalidate Caches...，选择Invalidate and Restart，清除PyCharm的缓存后重启，解决可能的缓存识别异常。

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