React中App.js出现state与modules未定义错误的解决方法

你写的是函数组件，但混用了类组件的语法，这就是state和this未定义报错的核心原因。函数组件里没有this对象，也不能直接用类组件的state字段声明方式，可通过以下两种方式修复：

方案一：改成类组件（匹配你原本导入的Component） #

把函数组件结构换成类组件，保留你原本的状态逻辑，只需调整结构：

import React, { Component } from "react";
import NavBar from "./components/navbar";
import "./App.css";
import Counters from "./components/counters";

// 替换函数组件为类组件继承Component
class App extends Component {
    // 类组件中可直接声明state字段
    state = {
        counters: [
            { id: 1, value: 2 },
            { id: 2, value: 3 },
            { id: 3, value: 0 },
            { id: 4, value: 0 },
        ],
    };

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

    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 });
    };

    // 类组件必须把渲染逻辑放到render方法内
    render() {
        return (
            <React.Fragment>
                <NavBar />
                <main className="container">
                    <Counters
                        counters={this.state.counters}
                        onReset={this.handleReset}
                        onIncrement={this.handleIncrement}
                        onDelete={this.handleDelete}
                    ></Counters>
                </main>
            </React.Fragment>
        );
    }
}

export default App;

方案二：改成函数组件+useState Hook（现代React推荐写法） #

如果想保留函数组件，用useState钩子管理状态，去掉所有this相关代码：

import React, { useState } from "react";
import NavBar from "./components/navbar";
import "./App.css";
import Counters from "./components/counters";

function App() {
    // 用useState声明状态：counters是当前状态值，setCounters是更新状态的方法
    const [counters, setCounters] = useState([
        { id: 1, value: 2 },
        { id: 2, value: 3 },
        { id: 3, value: 0 },
        { id: 4, value: 0 },
    ]);

    handleIncrement = (counter) => {
        const newCounters = [...counters];
        const index = newCounters.indexOf(counter);
        newCounters[index] = { ...counter };
        newCounters[index].value++;
        setCounters(newCounters);
    };

    handleDelete = (counterId) => {
        const newCounters = counters.filter((c) => c.id !== counterId);
        setCounters(newCounters);
    };

    handleReset = () => {
        // 注意这里要返回新对象，避免修改原状态
        const newCounters = counters.map((c) => ({ ...c, value: 0 }));
        setCounters(newCounters);
    };

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

export default App;

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