'state' 未定义 no-undef答案

【问题标题】：‘state’ is not defined no-undef'state' 未定义 no-undef
【发布时间】：2021-05-26 11:33:44
【问题描述】：

我使用教程来学习 React，但很快就被卡住了。在教程中，他们使用以下代码：

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <React.Fragment>
        <span>{this.state.count}</span>

        <button>Increment</button>
      </React.Fragment>
    );
  }
}

export default Counter;

一切都很好。

但在我的情况下，我得到了这个错误：

src\components\counter.jsx 第 4:3 行：“状态”未定义 no-undef 搜索关键字以了解有关每个错误的更多信息。

在尝试了一切之后，我认为是因为 react 版本（他们使用的是旧版本）。

所以我的问题是如何修复这个错误，以及阻止我的代码工作的版本之间的实际变化。天呐！

【问题讨论】：

您在哪里以及如何导入 Counter 组件。？
您的代码在此codesandbox 中运行良好。您能否澄清“在版本之间更改”的意思？什么版本？
@JayeshNaghera 在 index.js "import Counter from "./components/counter";"
@DrewReese 在教程中他们使用的是旧版本的 react
好吧，我想现在使用构造函数，这样你就可以继续前进，但要明白这不是必需的，除非你需要在初始化过程中引用任何传递的道具（请参阅this SO 帖子）。我建议（非常）熟悉组件的生命周期并转向功能组件和 React 钩子，生活会更好。祝你好运。

标签： javascript reactjs jsx

【解决方案1】：

这是一个与react 本身无关的问题，但我相信使用create-react-app 创建的项目。正在进行的问题在 cmets 中进行了讨论，并且通过简单地重新使用命令本身来创建一个新项目，它对一些人有用，但仍然等待维护者的评论。所以这不是你做错了什么。冷静一下。

我从昨天开始就一直在跟踪这个问题，甚至发过同样的推文。一些依赖关系可能已经搞砸了。可能是eslint 或babel 插件之一。

问题的链接 - https://github.com/facebook/create-react-app/issues/10598

【讨论】：

有趣，我试图弄清楚如何解决它（从您发送的链接），但我不明白。运行“npx build”？
@JustWantToLearn 这里提到了两件事 - 尝试使用 npx create-react-app 再次创建一个新应用程序或在现有应用程序上运行 yarn start 以查看它是否有效。我希望我能为您提供更多帮助，但请密切关注此线程以获取任何更新。

【解决方案2】：

我遇到了同样的问题。我使用了错误的版本。下面的文档为我提供了为新版本创建新反应应用程序的说明。现在我解决了这个问题。

https://create-react-app.dev/docs/getting-started/

【讨论】：

【解决方案3】：

将状态放入构造函数中：

  constructor(props) {
    super(props);
    this.state = {
       count: 0,
  
  }

【讨论】：

React 组件中不需要构造函数。
谢谢德鲁，你能解释一下有什么区别吗？当我们希望在初始化类（let myCounter = new Counter(10)）时获得对象的初始值（我们可以在调用/初始化类时更改）时，我们在构造函数中使用它。通过这种方式，我们可以为新创建的对象赋予值 10。没有构造函数，我们无法在初始化阶段完成。有什么区别，什么时候我们在没有构造函数的情况下使用它。当我们不想将新值传递给初始化的组件时，我们是否使用没有构造函数的函数。你能举个例子什么时候使用哪个吗？在此先感谢:)
它确实有效，但发生了什么变化？为什么过去有效而现在无效？在下一步中，我需要添加以下代码： style = { fontSize: "10px", };它也进入同一个构造函数？
您不需要构造函数来初始化 React 状态，请参阅上面 OP 评论中的链接代码框。在箭头函数之前，您需要将this 绑定到引用组件的this 的任何函数，即如果它们需要this.setState(.....) 或访问this.state。箭头函数会自动为您绑定调用者的this。
我知道this，但我们不仅仅使用构造函数来绑定函数。使用构造函数，您可以在使用 new ( new Counter(10)) 调用类时提供新值。

【解决方案4】：

由于构造函数未初始化，state 您在 React 中分配了一个关键字，这就是它作为错误出现的原因。

通过添加构造函数来修复这样的代码 -

constructor(props) {
   super(props);
   this.state = { count: 0 };
}

有关详细信息，请参阅 - Counstructor in React Class Component

【讨论】：

state 不是关键字，它只是一个对象和类属性。 React 基于类的组件中不需要构造函数（参见其他对话）。