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 (
    <div style={{ padding: 30 }}>
      {/* 这是盒子 */}
      <div
        style={{
          width: box.width,
          height: box.height,
          background: box.bgColor,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <h1 style={{ color: '#fff' }}>{box.name}</h1>
      </div>

      {/* 这是更改框的表单元素 */}
      <div
        style={{
          marginTop: 30,
          width: 400,
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <h3>Change the Apparence of the Box:</h3>
        <p>Box Name:</p>
        <input type='text' value={box.name} onChange={updateBoxName} />

        <p>Background Color:</p>
        <select value={box.bgColor} onChange={updateBakcgroundColor}>
          <option value='blue'>Blue</option>
          <option value='red'>Red</option>
          <option value='green'>Green</option>
          <option value='orange'>Orange</option>
        </select>

        <p>Box Width:</p>
        <input type='number' value={box.width} onChange={updateBoxWidth} />

        <p>Box Height:</p>
        <input type='number' value={box.height} onChange={updateBoxHeight} />
      </div>
    </div>
  );
}

export default App;
}