迹忆客 专注技术分享

这篇实用且直截了当的文章向您展示了如何在 React 中正确更新状态中的对象和数组。我们将使用useState钩子和功能组件。

事不宜迟，让我们开始吧。

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

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

如果您想更改背景颜色但保持其他内容不变，可以使用扩展运算符（您也可以将其与数组一起使用），如下所示：

setBox(previousState => {
      return { ...previousState, bgColor: 'red' }
});

或者像这样：

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

不要使用此代码：

setBox({bgColor: 'red'})

因为它会从状态中删除名称、宽度和高度。为了更清楚，让我们深入研究下面的工作示例。

完整的例子

应用预览

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

以下是它的工作原理：

步骤

以下是生成上述演示的步骤。

1.新建一个React项目：

npx create-react-app jiyik-state-example

这个名字完全取决于你。如果您愿意，请选择另一个。

2. src/App.js中的最终源码（附解释）：

// jiyik.com
// src/App.js
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;
}

export default App;

3.启动它：

npm start

并在 http://localhost:3000 检查结果。