react 使用 use-immer 更简洁的更新嵌套 state
state 可以保存任何类型的 JavaScript 值，包括对象。但是你不应该直接改变你在 React state 中持有的对象。相反，当您想要更新一个对象时，您需要创建一个新的对象(或者复制一个现有的对象)，然后设置 state 以使用该副本。
更新嵌套的对象 - 原有写法
考虑一个像这样的嵌套对象结构:
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，你很清楚如何直接赋值做到这一点：
但是在 React 中，你需要将状态视为不可变的！为了改变 city，您首先需要生成新的 artwork 对象（预先填充来自前一个的数据），然后生成指向新的 artwork 的新的 person 对象：
const nextArtwork = { ...person.artwork, city: 'New Delhi' }; const nextPerson = { ...person, artwork: nextArtwork }; setPerson(nextPerson); 复制代码或者，写成单个函数调用:
setPerson({ ...person, // Copy other fields artwork: { // but replace the artwork ...person.artwork, // with the same one city: 'New Delhi' // but in New Delhi! } }); 复制代码使用 immer 编写简洁的更新逻辑
如果你的 state 嵌套很深，您可能需要考虑将其扁平化。但是如果你不想更改 state 的结构，更喜欢使用嵌套扩展的快捷方式。immer是一个流行的库，它允许你使用方便但不断变化的语法编写代码，并负责为你生成副本。使用 immer 时，你所编写的代码看起来像是在“打破规则”并改变一个对象:
updatePerson(draft => { draft.artwork.city = 'Lagos'; }); 复制代码但与常规突变不同的是，它不会覆盖过去的状态！
尝试 Immer：
将
use-immer作为依赖项添加到您的package.json中执行
npm install然后将
import { useState } from 'react'替换为import { useImmer } from 'use-immer'
import { useImmer } from 'use-immer'; export default function Form() { const [person, updatePerson] = useImmer({ name: 'Niki de Saint Phalle', artwork: { title: 'Blue Nana', city: 'Hamburg', image: 'https://i.imgur.com/Sd1AgUOm.jpg', } }); function handleNameChange(e) { updatePerson(draft => { draft.name = e.target.value; }); } function handleTitleChange(e) { updatePerson(draft => { draft.artwork.title = e.target.value; }); } function handleCityChange(e) { updatePerson(draft => { draft.artwork.city = e.target.value; }); } function handleImageChange(e) { updatePerson(draft => { draft.artwork.image = e.target.value; }); } return ( <> <label> Name: <input value={person.name} onChange={handleNameChange} /> </label> <label> Title: <input value={person.artwork.title} onChange={handleTitleChange} /> </label> <label> City: <input value={person.artwork.city} onChange={handleCityChange} /> </label> <label> Image: <input value={person.artwork.image} onChange={handleImageChange} /> </label> <p> <i>{person.artwork.title}</i> {' by '} {person.name} <br /> (located in {person.artwork.city}) </p> <img src={person.artwork.image} alt={person.artwork.title} /> </> ); } 复制代码请注意事件处理程序变得多么简洁。您可以根据需要在单个组件中混合使用 useState 和 useImmer。Immer 是保持更新处理程序简洁的好方法，特别是如果您的状态中有嵌套，并且复制对象会导致重复代码。
Immer 是如何工作的?
Immer 提供的 draft 是一种特殊类型的对象，称为 Proxy，它“记录”你用它做了什么。这就是为什么您可以随心所欲地对它进行修改的原因！Immer 会找出 draft 的哪些部分已更改，并生成一个包含你所做编辑的全新对象。
伪原创工具 SEO网站优化 https://www.237it.com/
作者：小十七_
链接：https://juejin.cn/post/7035997633717993485