Question

每当我在我的react.js项目中的App.js文件中声明状态时，我都会得到错误状态”，即未定义no-undef，并且在声明函数时也会收到此错误。

我一直在寻找各种解决方案的地方，但没有找到解决方案。

import React from "react";
import logo from "./logo.svg";
import Counters from "./components/counters";
import Navbar from "./components/navbar";
import "./App.css";
function App() {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };
  handleDelete = counterId => {
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };
  handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState(counters);
  };

  incrementHandle = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counter[index].value++;
    this.setState({ counters });
  };

  return (
    <React.Fragment>
      <Navbar />
      <main className="container">
        <Counters
          counters={this.state.counters}
          onIncrement={this.incrementHandle}
          onDelete={this.handleDelete}
          onReset={this.handleReset}
        />
      </main>
    </React.Fragment>
  );
}

export default App;

./ src / App.js 第7行：“ state”未定义no-undef 第15行：未定义'handleDelete'no-undef 第19行：“ handleReset”未定义no-undef 第27行：“ incrementHandle”未定义为no-undef

Answer 1

您是否使用React Hooks，因为默认情况下函数是哑巴/无状态组件，因此默认情况下不具有任何状态。我以前从未使用过挂钩，但是我可以肯定地查阅文档来帮助您。但是，您可以将功能组件转换为基于类的组件，而不是使用钩子，从而使您的生活变得更加轻松。

Answer 2

如果要在React Function组件中使用状态，则需要hooks。使用挂钩时，您的组件将如下所示：

import React, { useState } from "react";  // import useState too
import logo from "./logo.svg";
import Counters from "./components/counters";
import Navbar from "./components/navbar";
import "./App.css";

function App() {
  // useState function returns an array with two items. First is your state object (similar to `this.state`)
  // and second is a function to update the state object, ie. the first item of array (similar to `this.setState`, but with minor changes, see react docs for more info, linked above)
  const [counters, setCounters] = useState([  // useState to set initial counter value
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]);

  // use setCounters method to update the counters state 
  const handleDelete = counterId => setCounters(counters => counters.filter(c => c.id !== counterId));

  const handleReset = () => setCounters(counters => counters.map(c => {
    c.value=0;
    return c;
  }));

  const incrementHandle = counter => {
    const counters_copy = [...counters];  // rename to counters_copy to avoid having global and local counters variable name conflict
    const index = counters_copy.indexOf(counter);
    counters_copy[index] = { ...counter };
    counter_copy[index].value++;
    setCounters({ counters_copy });
  };

  return (
    <React.Fragment>
      <Navbar />
      <main className="container">
        <Counters
          counters={counters} // no need of this.state
          onIncrement={incrementHandle}  // no need to this
          onDelete={handleDelete}  // no need to this
          onReset={handleReset}  // no need to this
        />
      </main>
    </React.Fragment>
  );
}

export default App;

或者使用可以使用类组件代替函数，并使用旧状态（不带钩子）。

// imports stays the same
...

class App extends React.Component {  // convert to class
constructor(props){
  super(props);
  this.state = {  // initial state in constructor
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  ...
  // handler functions stays the same

  render(){  // return goes inside render function
    return (...);  // contents of return stays the same
  }
}

export default App;
// don't actually write ... , it just means what you had in your question the code stays same

在类组件中不能使用钩子，在功能组件中不能使用this.state。
因此，如果您的组件是：
function->使用钩子，即useState，useRef等。
class->使用this.state和this.setState

功能组件也具有更好的性能和代码缩编，因此我建议使用它。您的应用程序性能会更好，并且捆绑包的尺寸会更小。

Answer 3

我通过将其更改为类扩展组件来工作。您必须使用“ imrc”，而我注释掉了“ imr”。 Mosh在单击App.JS时已经设置了这样的工作区，所以我想知道这是否就是旧的App.JS在默认情况下的外观？

替换-function App() { 与-class App extends Component {

另外，为类添加渲染{}。

连同以上更改也替换-import React from "react";

带有-import React, { Component } from "react";

位于导入的顶部。

希望它会解决您的错误，因为它对我有用。

状态”未在App.js文件中定义为no-undef

3 个答案: