更新状态中的对象

什么是突变？

¥What’s a mutation?

你可以在状态中存储任何类型的 JavaScript 值。

¥You can store any kind of JavaScript value in state.

const [x, setX] = useState(0);

到目前为止，你一直在处理数字、字符串和布尔值。这些类型的 JavaScript 值是 “不可变的”，表示不可更改或 “read-only”。你可以触发重新渲染以替换值：

¥So far you’ve been working with numbers, strings, and booleans. These kinds of JavaScript values are “immutable”, meaning unchangeable or “read-only”. You can trigger a re-render to replace a value:

setX(5);

x 状态从 0 变为 5，但数字 0 本身没有变化。无法对 JavaScript 中的数字、字符串和布尔值等内置原始值进行任何更改。

¥The x state changed from 0 to 5, but the number 0 itself did not change. It’s not possible to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript.

现在考虑一个处于状态的对象：

¥Now consider an object in state:

const [position, setPosition] = useState({ x: 0, y: 0 });

从技术上讲，可以更改对象本身的内容。这称为突变：

¥Technically, it is possible to change the contents of the object itself. This is called a mutation:

position.x = 5;

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

¥However, although objects in React state are technically mutable, you should treat them as if they were immutable—like numbers, booleans, and strings. Instead of mutating them, you should always replace them.

将状态视为只读

¥Treat state as read-only

换句话说，你应该将任何放入状态的 JavaScript 对象视为只读。

¥In other words, you should treat any JavaScript object that you put into state as read-only.

此示例在状态中保存一个对象以表示当前指针位置。当你在预览区域上触摸或移动光标时，红点应该会移动。但是点停留在初始位置：

¥This example holds an object in state to represent the current pointer position. The red dot is supposed to move when you touch or move the cursor over the preview area. But the dot stays in the initial position:

问题在于这段代码。

¥The problem is with this bit of code.

onPointerMove={e => {
  position.x = e.clientX;
  position.y = e.clientY;
}}

这段代码修改了从 之前的渲染 分配给 position 的对象。但是没有使用状态设置函数，React 不知道对象发生了变化。所以 React 不会做任何响应。这就像在你已经吃完饭后试图改变订单。虽然改变状态在某些情况下可行，但我们不推荐这样做。你应该将在渲染中有权访问的状态值视为只读。

¥This code modifies the object assigned to position from the previous render. But without using the state setting function, React has no idea that object has changed. So React does not do anything in response. It’s like trying to change the order after you’ve already eaten the meal. While mutating state can work in some cases, we don’t recommend it. You should treat the state value you have access to in a render as read-only.

在本例中，要实际执行 触发重新渲染，请创建一个新对象并将其传递给状态设置函数：

¥To actually trigger a re-render in this case, create a new object and pass it to the state setting function:

onPointerMove={e => {
  setPosition({
    x: e.clientX,
    y: e.clientY
  });
}}

使用 setPosition，你告诉 React：

¥With setPosition, you’re telling React:

• 用这个新对象替换 position

  ¥Replace position with this new object

• 并再次渲染这个组件

  ¥And render this component again

当你触摸或悬停在预览区域上时，请注意红点现在如何跟随你的指针：

¥Notice how the red dot now follows your pointer when you touch or hover over the preview area:

position.x = e.clientX;
position.y = e.clientY;

const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);

setPosition({
  x: e.clientX,
  y: e.clientY
});

使用展开语法复制对象

¥Copying objects with the spread syntax

在前面的示例中，position 对象始终是从当前光标位置重新创建的。但通常，你会希望将现有数据作为你正在创建的新对象的一部分。例如，你可能只想更新表单中的一个字段，但保留所有其他字段的先前值。

¥In the previous example, the position object is always created fresh from the current cursor position. But often, you will want to include existing data as a part of the new object you’re creating. For example, you may want to update only one field in a form, but keep the previous values for all other fields.

这些输入字段不起作用，因为 onChange 处理程序改变了状态：

¥These input fields don’t work because the onChange handlers mutate the state:

例如，这一行改变了过去渲染的状态：

¥For example, this line mutates the state from a past render:

person.firstName = e.target.value;

获得所需行为的可靠方法是创建一个新对象并将其传递给 setPerson。但在这里，你还想将现有数据复制到其中，因为只有一个字段发生了更改：

¥The reliable way to get the behavior you’re looking for is to create a new object and pass it to setPerson. But here, you want to also copy the existing data into it because only one of the fields has changed:

setPerson({
  firstName: e.target.value, // New first name from the input
  lastName: person.lastName,
  email: person.email
});

你可以使用 ... 对象展开 语法，这样你就不需要单独复制每个属性。

¥You can use the ... object spread syntax so that you don’t need to copy every property separately.

setPerson({
  ...person, // Copy the old fields
  firstName: e.target.value // But override this one
});

现在表单生效了！

¥Now the form works!

请注意你没有为每个输入字段声明单独的状态变量。对于大型表单，将所有数据分组到一个对象中非常方便 - 只要你正确地更新它！

¥Notice how you didn’t declare a separate state variable for each input field. For large forms, keeping all data grouped in an object is very convenient—as long as you update it correctly!

请注意，... 展开语法是 “浅的” - 它只复制一层深度的内容。这使它变得很快，但这也意味着如果你想更新一个嵌套的属性，你将不得不多次使用它。

¥Note that the ... spread syntax is “shallow”—it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you’ll have to use it more than once.

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <label>
        First name:
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last name:
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </label>
      <p>
        {person.firstName}{' '}
        {person.lastName}{' '}
        ({person.email})
      </p>
    </>
  );
}

更新嵌套对象

¥Updating a nested object

考虑这样的嵌套对象结构：

¥Consider a nested object structure like this:

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

如果你想更新 person.artwork.city，很清楚如何用突变来做：

¥If you wanted to update person.artwork.city, it’s clear how to do it with mutation:

person.artwork.city = 'New Delhi';

但是在 React 中，你将状态视为不可变的！为了更改 city，你首先需要生成新的 artwork 对象（预先填充了前一个对象的数据），然后生成指向新的 artwork 的新的 person 对象：

¥But in React, you treat state as immutable! In order to change city, you would first need to produce the new artwork object (pre-populated with data from the previous one), and then produce the new person object which points at the new artwork:

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

或者，写成单个函数调用：

¥Or, written as a single function call:

setPerson({
  ...person, // Copy other fields
  artwork: { // but replace the artwork
    ...person.artwork, // with the same one
    city: 'New Delhi' // but in New Delhi!
  }
});

这有点罗嗦，但在很多情况下都可以正常工作：

¥This gets a bit wordy, but it works fine for many cases:

let obj = {
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj3 = {
  name: 'Copycat',
  artwork: obj1
};

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

¥Write concise update logic with Immer

如果你的状态嵌套很深，你可能想考虑 展平它。 但是，如果你不想改变你的状态结构，你可能更喜欢嵌套传播的捷径。Immer 是一个流行的库，它允许你使用方便但可变的语法进行编写，并负责为你生成副本。使用 Immer，你编写的代码看起来就像你是 “打破规则” 并且正在改变一个对象：

¥If your state is deeply nested, you might want to consider flattening it. But, if you don’t want to change your state structure, you might prefer a shortcut to nested spreads. Immer is a popular library that lets you write using the convenient but mutating syntax and takes care of producing the copies for you. With Immer, the code you write looks like you are “breaking the rules” and mutating an object:

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

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

¥But unlike a regular mutation, it doesn’t overwrite the past state!

尝试 Immer：

¥To try Immer:

1. 运行 npm install use-immer 以将 Immer 添加为依赖

   ¥Run npm install use-immer to add Immer as a dependency

2. 然后用 import { useImmer } from 'use-immer' 替换 import { useState } from 'react'

   ¥Then replace import { useState } from 'react' with import { useImmer } from 'use-immer'

这是上面的示例转换为 Immer：

¥Here is the above example converted to Immer:

请注意事件处理程序变得多么简洁。你可以根据需要在单个组件中混合搭配 useState 和 useImmer。Immer 是保持更新处理程序简洁的好方法，尤其是在你的状态中存在嵌套并且复制对象会导致重复代码的情况下。

¥Notice how much more concise the event handlers have become. You can mix and match useState and useImmer in a single component as much as you like. Immer is a great way to keep the update handlers concise, especially if there’s nesting in your state, and copying objects leads to repetitive code.