更改React js - Map函数中嵌套对象的状态值不起作用

// 初始化状态
state = {
  data: [
    { id: 1, name: "John", age: 25 },
    { id: 2, name: "Jane", age: 30 },
    { id: 3, name: "Tom", age: 35 }
  ]
};

// 更新状态
updateData = (id, newName) => {
  const newData = this.state.data.map(item => {
    if (item.id === id) {
      // 使用对象展开运算符创建一个新的对象，并更新name属性
      return { ...item, name: newName };
    }
    return item;
  });

  // 使用setState方法更新状态
  this.setState({ data: newData });
};

// 渲染组件
render() {
  return (
    <div>
      {this.state.data.map(item => (
        <div key={item.id}>
          <span>{item.name}</span>
          <button onClick={() => this.updateData(item.id, "New Name")}>
            Update Name
          </button>
        </div>
      ))}
    </div>
  );
}