状态可以保存任何类型的 JavaScript 值，包括对象。但是你不应该直接改变你在 React 状态下持有的对象。而是，当你想更新一个对象时，你需要创建一个新对象（或复制一个现有对象），然后设置状态以使用该副本。

正确更新处于 React 状态的对象

React 状态中的对象在技术上是可变的，但你应该将它们视为不可变的，就像数字、布尔值和字符串一样。你应该始终替换它们，而不是改变它们。

将状态视为只读

任何放入状态的 JavaScript 对象视为只读。

{ 直接修改 状态对象是不作响应的 }
onPointerMove={e => {  
    position.x = e.clientX;  
    position.y = e.clientY;  
}}
{ 要实际执行 [触发重新渲染]，创建一个新对象并将其传递给状态设置函数 }
onPointerMove={e => {  
    setPosition({  
        x: e.clientX,  
        y: e.clientY  
    });  
}}

{ 下一个例子 }
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleEmailChange(e) {
    setPerson({
      ...person,
      email: e.target.value
    });
  }
  
 // 也可以，一个函数处理多个：
  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }
  
//  `...` 展开语法是 “浅的” - 它只复制一层深度的内容。这使它变得很快，但这也意味着如果你想更新一个嵌套的属性，你将不得不多次使用它。
  

使用 Immer 编写简洁的更新逻辑

 updatePerson(draft => {  
    draft.artwork.city = 'Lagos';  
});

// 常规突变不同的是，它不会覆盖过去的状态！