11. React 中使用 useState Hook 更新数组和对象

当状态更新时，它会被完全覆盖。如果我们的状态是具有多个属性的对象，但您只想更改某个属性的值怎么办？例如，我们初始化描述框的状态，如下所示：

const [box, setBox] = useState({
   name: 'jiyik.com',
   bgColor: 'blue', // background color
   width: 400,
   height: 300
});

 如果您想更改背景颜色但保持其他内容不变

setBox({...box, bgColor: 'red'});

不要使用此代码：因为它会从状态中删除名称、宽度和高度。

setBox({bgColor: 'red'})

完整的小案例

我们要制作的演示展示了一个盒子和几个表单元素。您可以使用相应的输入/选择元素来更新框的名称、背景颜色、宽度或高度。

import { useState } from 'react';
import './App.css';

function App() {

   // 使用具有四个属性的对象初始化状态
  const [box, setBox] = useState({
    name: 'jiyik.com',
    bgColor: 'blue',
    width: 400,
    height: 100,
  });

  // 此函数将更新用户在名称字段中键入时将调用的框的名称
  const updateBoxName = (e) => {
    setBox({ ...box, name: e.target.value });
  };

  // 此函数将更新框的背景颜色，当用户更改选择元素时将调用它
  const updateBakcgroundColor = (e) => {
    setBox({ ...box, bgColor: e.target.value });
  };

  // 此函数将更新当用户更改宽度输入时将调用的框的宽度
  const updateBoxWidth = (e) => {
    setBox({ ...box, width: parseInt(e.target.value) });
  };

  // 此函数将更新当用户更改高度输入时将调用的框的高度
  const updateBoxHeight = (e) => {
    setBox({ ...box, height: parseInt(e.target.value) });
  };
   

  return (
    

      {/* 这是盒子 */}
      

        
{box.name}
      

      {/* 这是更改框的表单元素 */}
      

        
Change the Apparence of the Box:
        
Box Name:
        

        
Background Color:
        
          Blue
          Red
          Green
          Orange
        

        
Box Width:
        

        
Box Height:
        
      
    
  );
}

export default App;
}