反应如何使用setState有条件地编辑或添加对象数组中的对象

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  }

  updateOrAddItem = (id, newName) => {
    this.setState(prevState => {
      // 查找是否已有相同ID的对象
      const existingItemIndex = prevState.items.findIndex(item => item.id === id);

      if (existingItemIndex !== -1) {
        // 如果找到，则编辑现有对象
        const updatedItems = [...prevState.items];
        updatedItems[existingItemIndex].name = newName;
        return { items: updatedItems };
      } else {
        // 如果没有找到，则添加新对象
        return {
          items: [...prevState.items, { id, name: newName }]
        };
      }
    });
  };

  render() {
    return (
      <div>
        {/* 渲染items列表 */}
        {this.state.items.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
        <button onClick={() => this.updateOrAddItem(1, 'Updated Item 1')}>
          Update Item 1
        </button>
        <button onClick={() => this.updateOrAddItem(3, 'New Item')}>Add New Item</button>
      </div>
    );
  }
}