如何在React中显示列表中添加的项目数量？

import React, { Component } from "react";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projects: [],
      itemCount: 0,
    };
  }

  addProject = (project) => {
    const { projects, itemCount } = this.state;
    const newProjects = [...projects, project];
    this.setState({
      projects: newProjects,
      itemCount: itemCount + 1,
    });
  };

  deleteProject = (index) => {
    const { projects, itemCount } = this.state;
    const newProjects = [...projects];
    newProjects.splice(index, 1);
    this.setState({
      projects: newProjects,
      itemCount: itemCount - 1,
    });
  };

  render() {
    const { projects, itemCount } = this.state;
    return (
      <div>
        <h2>项目数量: {itemCount}</h2>
        <ul>
          {projects.map((project, index) => (
            <li key={index}>
              {project}
              <button onClick={() => this.deleteProject(index)}>删除</button>
            </li>
          ))}
        </ul>
        <button onClick={() => this.addProject("新项目")}>添加项目</button>
      </div>
    );
  }
}

export default List;