关于使用setState向数组添加输入值的问题

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  handleInputChange = (event) => {
    this.setState({ inputValue: event.target.value });
  };

  handleAddItem = () => {
    const { inputValue, items } = this.state;
    if (inputValue.trim() !== '') {
      this.setState({
        items: [...items, inputValue],
        inputValue: ''
      });
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
        />
        <button onClick={this.handleAddItem}>Add Item</button>
        <ul>
          {this.state.items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

// 错误的做法
this.state.items.push(newItem);

// 正确的做法
this.setState({
  items: [...this.state.items, newItem]
});

this.setState(
  { items: [...this.state.items, newItem] },
  () => {
    console.log(this.state.items); // 获取更新后的状态
  }
);