WebStorm 检查器在使用 ES6 设置初始 React 状态时抛出警告答案

【问题标题】：WebStorm inspector throws warning when setting initial React state with ES6WebStorm 检查器在使用 ES6 设置初始 React 状态时抛出警告
【发布时间】：2016-03-18 16:39:33
【问题描述】：

我一直在开发 React Web 应用，最近从 WebStorm 10 升级到了 2016.1。到目前为止，我对新版本感到满意，除了一些检查员的怪癖，如果我能提供帮助，我宁愿不要在场，其中一个我无法找到解决办法。

我正在使用 ES6 类来声明我的所有 React 组件，并且在我设置状态的每个实例中，WebStorm 都会在 .state 方法上抛出未解决的变量警告。

有问题的代码sn-p：

import React from "react";
import autobind from 'autobind-decorator';

@autobind
class List extends React.Component{
  constructor() {
    super();

    this.state = {
      name: "List",
      items: {},
      history: {},
      suggestions: [],
      highlightIndex: 0,
      suggestionsHover: false,
      autoDelete: true,
      delta: 0,
      mouse: 0,
      isPressed: false,
      lastPressed: 0,
      order: []
    }
  }

警告：

Unresolved variable state

应该注意的是，这个警告在 WebStorm 10 中没有出现，并且警告会延续到设置状态的其他实例（即.setState）。还应该注意的是，我正在使用 babelify 将我的代码转换为 ES5 以及 autobind-decorator，如图所示。

任何帮助或见解将不胜感激。谢谢，如果我需要提供任何其他信息，请告诉我。

【问题讨论】：

听起来有些相似 -- 看看最后的 cmets -- intellij-support.jetbrains.com/hc/en-us/community/posts/…

标签： reactjs ecmascript-6 webstorm babeljs

【解决方案1】：

尝试使用 TypeScript 定义文件设置代码帮助。我并不是说将您的代码转换为 TypeScript。查看 JetBrains 关于该主题的这篇博文：

https://blog.jetbrains.com/webstorm/2015/10/working-with-reactjs-in-webstorm-coding-assistance/

基本上，进入 WebStorm 的首选项。向下：Languages & Frameworks > JavaScript > Libraries 点击Download 按钮。搜索React（以及该列表中可能提供帮助的任何其他内容），然后单击Download & Install。这应该有助于消除一些丑陋的警告。

现在，如果只有 WebStorm 能够将 PropTypes 应用于 props 对象，我们就能够消除那些“未解决的变量/函数/方法”警告。

【讨论】：

哇，非常感谢！即使在 ES6 环境中使用 TypeScript 定义也非常有用。我设法摆脱了我的import {Component} from 'react' 警告。
这太棒了——它摆脱了我的“未解决的函数或方法 setState()”和相关问题。
你的回答很棒！

【解决方案2】：

这是一个已知问题。

该错误已在 2016.2 版本中修复（请参阅：https://youtrack.jetbrains.com/issue/WEB-20884）。

此更新一经推出，this.state、this.props 和其他当前未解决的变量将得到解决。

【讨论】：

【解决方案3】：

您需要在构造函数中添加道具

constructor(props) {
super(props);

【讨论】：