“state” 未定义 no-undef

Question

我使用教程学习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个字符：‘state’未定义no-undef 搜索关键字以了解每个错误的详情。

尝试了所有方法后，我认为这是因为React版本问题（他们使用的是旧版本）。

所以我的问题是如何解决这个错误，以及新旧版本之间实际发生了什么变化，导致我的代码无法正常运行。谢谢！

- Just Want To Learn

---

你在哪里以及如何导入 Counter 组件？ - Jayesh Naghera

你的代码在这个 codesandbox 上运行良好。你能解释一下你所说的“版本之间有变化”是指什么吗？是哪些版本发生了变化？ - Drew Reese

在 index.js 中： "import Counter from "./components/counter";" - Just Want To Learn

在教程中，他们使用了较旧版本的React。 - Just Want To Learn

好吧，我想现在使用构造函数让你可以继续前进，但要明白除非需要引用任何传递的 props 作为初始化过程的一部分（请参见此 SO 帖子），否则这不是必需的。我建议你（非常）熟悉组件生命周期并转向函数组件和 React hooks，生活会更美好。祝你好运。 - Drew Reese

Answer 1

这是一个与 react 本身无关，而是与使用 create-react-app 创建的项目有关的问题。正在评论中讨论这个持续存在的问题，并且一些人通过简单地重新使用命令来创建一个新项目解决了这个问题，但仍在等待维护者的评论。所以这不是你做错了什么。放轻松。

我从昨天开始就一直在跟踪这个问题，甚至发了推文。可能某些依赖项出了问题。可能是 eslint 或其中一个 babel 插件。

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

- Lakshya Thakur

---

有趣的是，我尝试着弄清楚如何修复它（从你发送的链接），但我并不理解。运行“npx build”？ - Just Want To Learn

@JustWantToLearn 那里提到了两件事情 - 要么尝试使用 npx create-react-app 再创建一个新的应用程序，或者运行 yarn start 查看现有应用程序是否正常工作。我希望我能给你更多的帮助，但请留意这个线程以获取任何更新。 - Lakshya Thakur

Answer 2

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

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

- cantstopcoding

Answer 3

在构造函数中放置状态：

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

- Predrag Davidovic

---

React组件不需要构造函数。 - Drew Reese

它之前是可以工作的，但是发生了什么变化呢？ 为什么过去可以工作，现在却不行了？在下一步中，我需要添加以下代码： style = { fontSize: "10px", }; 它也要放进同一个构造函数里吗？ - Just Want To Learn

你不需要构造函数来初始化React状态，请参见我在上面的评论中链接的codesandbox。在箭头函数之前，您需要将this绑定到任何引用组件的this的函数，即如果它们需要this.setState（.....）或访问this.state。箭头函数会自动为您绑定调用者的this。 - Drew Reese

Drew Reese 也许你是对的，我在某个博客文章上看到了这个。但这很令人困惑，因为官方文档中说我们使用构造函数来初始化状态，而他正在使用 count: 0 进行初始化。这是来自 React 官方文档的内容： 如果您不初始化状态并且不绑定方法，则不需要为您的 React 组件实现构造函数。但他实际上正在初始化状态。 - Predrag Davidovic

@PredragDavidovic 好的，你抓住我了，因为我也无法在当前文档中找到任何相关内容，但我向你保证构造函数并不是严格要求。请参阅此SO帖子...基本上，只有在需要引用任何传递的props作为初始化组件的一部分时才需要构造函数。 - Drew Reese

Answer 4

由于构造函数未初始化，在React中分配关键字state时，因此会出现错误。

通过添加构造函数来修复您的代码，如下所示 -

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

更多信息，请参考 - React类组件中的构造函数

- aakanksha_02

---

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