เหตุใดการตอบสนองจึงแสดงว่าส่วนประกอบอัปเดต แต่คอนโซลไม่อัปเดต

ฉันสร้างแอป react redux แบบง่ายๆ ในเครื่องมือ dev โต้ตอบของ Google chrome ฉันทำเครื่องหมายที่ "การอัปเดตไฮไลต์" จากนั้นคลิกที่ปุ่มใดๆ ซึ่งแสดงว่าส่วนประกอบทั้งหมดอัปเดตแล้ว แต่ข้อความคอนโซลใน "AddButton" ไม่แสดงอะไรเลย ข้อผิดพลาดคอนโซล ตอบสนองเครื่องมือ dev หรือฉัน?

// index.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import { Provider } from "react-redux";
import { createStore } from "redux";

const reduser = (state = [], action) => {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, { text: action.text }];
    case "REMOVE_ITEM":
      return state.filter(t => t.text !== action.text);
    default:
      return state;
  }
};

const store = createStore(
  reduser,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

//App.js

import React, { Component } from "react";
import AddButton from "./comps/AddButton";
import ListContainer from "./comps/ListContainer";

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Simple app</h1>
        <AddButton />
        <ListContainer />
      </div>
    );
  }
}

export default App;

//comps/AddButton.js
import React, { Component } from "react";
import { connect } from "react-redux";

const addItem = () => ({ type: "ADD_ITEM", text: Date.now() });

class AddButton extends Component {
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("Update");
  }

  render() {
    return <button onClick={this.props.addItem}>add button</button>;
  }
}

export default connect(
  null,
  { addItem }
)(AddButton);

//comps/ListContainer.js
import React, { Component } from "react";
import { connect } from "react-redux";
import ListItem from "./ListItem";

class ListContainer extends Component {
  render() {
    return (
      <ul>
        {this.props.items.map(t => (
          <ListItem key={t.text} text={t.text} />
        ))}
      </ul>
    );
  }
}

const mapStateToProps = state => {
  return { items: state };
};

export default connect(mapStateToProps)(ListContainer);

//comps/ListItem.js
import React from "react";
import { connect } from "react-redux";
const removeItem = text => ({ type: "REMOVE_ITEM", text });
const ListItem = props => {
  return (
    <li>
      <button onClick={() => props.removeItem(props.text)}>{props.text}</button>
    </li>
  );
};

export default connect(
  null,
  { removeItem }
)(ListItem);

Lorem ipsum dolor นั่ง amet, consectetur adipisicing elit. Asperiores corporis culpa deleniti dolore dolores eaque eligendi eum fugit in, itaque iusto maiores natus nostrum placeat quisquam similique tempore veniam voluptatum.