在ReactJs組件中this.state為NULL

Question

我正在學習教程。 我不明白為什么totalCounters為null 。 我在網上搜索，但我不理解。

我收到的錯誤消息是：

TypeError：無法讀取null的屬性“ counters”。

我遵循了Mosh的教程。

這是我的App.js文件。

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

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <NavBar totalCounters={this.state.counters.length} />
        <main className="container">
          <Counters
            counters={this.counters}
            onReset={this.handleReset}
            onIncrement={this.handleIncrement}
            onDelete={this.handleDelete}
          />
        </main>
      </React.Fragment>
    );
  }
}

export default App;

這是我的navbar.jsx

import React, { Component } from "react";

class NavBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-light bg-light">
        <a className="navbar-brand" href="#">
          Navbar <span className="badge badge-pill badge-secondary">{this.props.totalCounters}</span>
        </a>
      </nav>
    );
  }
}

export default NavBar;

這是我的counters.jsx

import React, { Component } from "react";
import Counter from "./counter";

class counters extends Component {
  state = {
    counters: [
      { id: 1, value: 5 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

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

  handleReset = () => {
    const resetCounters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({ counters: resetCounters });
  };

  handleDelete = counterId => {
    const newCounters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters: newCounters });
  };

  render() {
    return (
      <div>
        <button
          onClick={this.handleReset}
          className="btn btn-primary btn-sm m2"
        >
          Reset
        </button>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.props.onDelete}
            onIncrement={this.handleIncrement}
            counter={counter}
          />
        ))}
      </div>
    );
  }
}

export default counters;

Answer 1

在React中， this.state對於每個組件都是本地的 。

因此，在counters中設置this.state.counters不允許App組件使用狀態。

這就是為什么counters在App組件中為null的原因。

Answer 2

因為您的App類組件中沒有狀態字段。 您想在任何地方使用狀態，都必須創建一個狀態對象。

1. 類字段

class App extends Component {
    state = { counters: [] }
}

2. 內部構造器

class App extends Component {
    contructor(props) {
        super(props)
        this.state = { counters: [] }
    }
}

Answer 3

您沒有初始化狀態。 您的state未定義。 像這樣修復它

class App extends Component {

   this.state = { counters : [] } 
}