reactjs - prevProps 和 props 是一样的

Question

当我使用 componentDidUpdate 比较 prevProps 或 prevState 时，得到的结果与我当前的 props 或 state 相同。

我已经搜索过它，发现我们应该以不变的方式使用状态和道具，我已经做到了。但问题并没有得到解决。

那么有什么可能导致这个问题吗？

import React, { Component } from "react";

import "./App.css";
import NavBar from "./components/navbar";
import Counters from "./components/counters";
// import Table from './components/table';

class App extends Component {
  constructor() {
    super();
    console.log("App - constructor");
  }

  componentDidMount() {
    console.log("App - componentDidMount");
  }

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

  resetHandler = () => {
    let counters = [...this.state.counters];
    let newCounters = counters.map((counter) => {
      counter.value = 0;
      return counter;
    });
    this.setState({ counters: newCounters });
  };

  deleteHandler = (id) => {
    let counters = [...this.state.counters];
    let newCounters = counters.filter((counter) => counter.id !== id);
    this.setState({ counters: newCounters });
  };

  incrementHandler = (id) => {
    let counters = [...this.state.counters];
    let newCounters = counters.map((counter) => {
      if (counter.id === id) {
        counter.value = counter.value + 1;
      }
      return counter;
    });
    this.setState({ counters: newCounters });
  };

  componentDidUpdate(prevProps, prevState) {
    console.log("prevProps", prevProps);
    console.log("prevState", prevState);
  }

  render() {
    console.log("App - render");
    return (
      <>
        <NavBar
          totalCounters={this.state.counters.filter((c) => c.value > 0).length}
        />
        <main className="container">
          <Counters
            onReset={this.resetHandler}
            onIncrement={this.incrementHandler}
            onDelete={this.deleteHandler}
            counters={this.state.counters}
          />
        </main>
      </>
    );
  }
}

export default App;

这是计数器：

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

class Counters extends Component {
  
  render() { 
    console.log("counters - render")
    const { onReset, counters, onDelete, onIncrement} = {...this.props}
    return ( 
      <div>
        <button className="btn btn-primary btn-sm m-2" onClick={onReset}>Reset</button>
        {counters.map( counter => 
          <Counter key={counter.id} 
            counter={counter}
            onDelete={onDelete}
            onIncrement={onIncrement} />)}
      </div>
     );
  }
}
 
export default Counters;

这是计数器：

import React, { Component } from 'react';

class Counter extends Component {

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.props.counter.value === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { value } = {...this.props.counter}
    return value === 0 ? 'zero' : value
  }

  render() { 
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button onClick={() => this.props.onIncrement(this.props.counter.id)} className="btn btn-secondary btn-sm m-2">Increment</button>
        <button onClick={() => this.props.onDelete(this.props.counter.id)} className="btn btn-danger btn-sm m-2">Delete</button>
      </div>
    )
  }
}
 
export default Counter;

标签： reactjs