更新状态中的对象

什么是突变？

🌐 What’s a mutation?

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

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

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

到目前为止，你一直在处理数字、字符串和布尔值。这些类型的 JavaScript 值是“不可变”的，意味着它们不可更改或“只读”。你可以触发重新渲染来_替换_一个值：

🌐 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 替换为这个新对象
• 并再次渲染这个组件

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

🌐 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 中，你要把 state 当作不可变的！为了改变 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 作为依赖
2. 然后将 import { useState } from 'react' 替换为 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.