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

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

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

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

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

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

setBox({bgColor: 'red'})

完整的小案例

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

1.  
   import { useState } from 'react';
2.  
   import './App.css';
3.  
    
4.  
   function App() {
5.  
    
6.  
   // 使用具有四个属性的对象初始化状态
7.  
   const [box, setBox] = useState({
8.  
   name: 'jiyik.com',
9.  
   bgColor: 'blue',
10.  
    width: 400,
11.  
    height: 100,
12.  
    });
13.  
     
14.  
    // 此函数将更新用户在名称字段中键入时将调用的框的名称
15.  
    const updateBoxName = (e) => {
16.  
    setBox({ ...box, name: e.target.value });
17.  
    };
18.  
     
19.  
    // 此函数将更新框的背景颜色，当用户更改选择元素时将调用它
20.  
    const updateBakcgroundColor = (e) => {
21.  
    setBox({ ...box, bgColor: e.target.value });
22.  
    };
23.  
     
24.  
    // 此函数将更新当用户更改宽度输入时将调用的框的宽度
25.  
    const updateBoxWidth = (e) => {
26.  
    setBox({ ...box, width: parseInt(e.target.value) });
27.  
    };
28.  
     
29.  
    // 此函数将更新当用户更改高度输入时将调用的框的高度
30.  
    const updateBoxHeight = (e) => {
31.  
    setBox({ ...box, height: parseInt(e.target.value) });
32.  
    };
33.  
     
34.  
     
35.  
    return (
36.  
    <div style={{ padding: 30 }}>
37.  
    {/* 这是盒子 */}
38.  
    <div
39.  
    style={{
40.  
    width: box.width,
41.  
    height: box.height,
42.  
    background: box.bgColor,
43.  
    display: 'flex',
44.  
    justifyContent: 'center',
45.  
    alignItems: 'center',
46.  
    }}
47.  
    >
48.  
    <h1 style={{ color: '#fff' }}>{box.name}</h1>
49.  
    </div>
50.  
     
51.  
    {/* 这是更改框的表单元素 */}
52.  
    <div
53.  
    style={{
54.  
    marginTop: 30,
55.  
    width: 400,
56.  
    display: 'flex',
57.  
    flexDirection: 'column',
58.  
    }}
59.  
    >
60.  
    <h3>Change the Apparence of the Box:</h3>
61.  
    <p>Box Name:</p>
62.  
    <input type='text' value={box.name} onChange={updateBoxName} />
63.  
     
64.  
    <p>Background Color:</p>
65.  
    <select value={box.bgColor} onChange={updateBakcgroundColor}>
66.  
    <option value='blue'>Blue</option>
67.  
    <option value='red'>Red</option>
68.  
    <option value='green'>Green</option>
69.  
    <option value='orange'>Orange</option>
70.  
    </select>
71.  
     
72.  
    <p>Box Width:</p>
73.  
    <input type='number' value={box.width} onChange={updateBoxWidth} />
74.  
     
75.  
    <p>Box Height:</p>
76.  
    <input type='number' value={box.height} onChange={updateBoxHeight} />
77.  
    </div>
78.  
    </div>
79.  
    );
80.  
    }
81.  
     
82.  
    export default App;
83.  
    }

这篇好文章是转载于：学新通技术网