React 18 更新 state 中的对象

最新推荐文章于 2024-05-25 12:52:21 发布
最新推荐文章于 2024-05-25 12:52:21 发布
阅读量1.2k 收藏
点赞数
分类专栏： react 文章标签： 更新 state 中的对象 将 state 视为只读的 使用展开语法复制对象 Immer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyn15159/article/details/132268751
版权

参考文章

更新 state 中的对象

state 中可以保存任意类型的 JavaScript 值，包括对象。但是，不应该直接修改存放在 React state 中的对象。相反，当想要更新一个对象时，需要创建一个新的对象（或者将其拷贝一份），然后将 state 更新为此对象。

什么是 mutation？

可以在 state 中存放任意类型的 JavaScript 值。

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

在 state 中存放数字、字符串和布尔值，这些类型的值在 JavaScript 中是不可变（immutable）的，这意味着它们不能被改变或是只读的。可以通过替换它们的值以触发一次重新渲染。

setX(5);

state x 从 0 变为 5，但是数字 0 本身并没有发生改变。在 JavaScript 中，无法对内置的原始值，如数字、字符串和布尔值，进行任何更改。

现在考虑 state 中存放对象的情况：

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

从技术上来讲，可以改变对象自身的内容。当这样做时，就制造了一个 mutation：

position.x = 5;

然而，虽然严格来说 React state 中存放的对象是可变的，但应该像处理数字、布尔值、字符串一样将它们视为不可变的。因此应该替换它们的值，而不是对它们进行修改。

将 state 视为只读的

换句话说，应该 把所有存放在 state 中的 JavaScript 对象都视为只读的。

在下面的例子中，用一个存放在 state 中的对象来表示指针当前的位置。当在预览区触摸或移动光标时，红色的点本应移动。但是实际上红点仍停留在原处：

import { useState } from 'react';
export default function MovingDot() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0
  });
  return (
    <div
      onPointerMove={e => {
        position.x = e.clientX;
        position.y = e.clientY;
      }}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
      }}>
      <div style={{
        position: 'absolute',
        backgroundColor: 'red',
        borderRadius: '50%',
        transform: `translate(${position.x}px, ${position.y}px)`,
        left: -10,
        top: -10,
        width: 20,
        height: 20,
      }} />
    </div>
  );
}

问题出在下面这段代码中。

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

这段代码直接修改了 上一次渲染中 分配给 position 的对象。但是因为并没有使用 state 的设置函数，React 并不知道对象已更改。所以 React 没有做出任何响应。虽然在一些情况下，直接修改 state 可能是有效的，但并不推荐这么做。应该把在渲染过程中可以访问到的 state 视为只读的。

在这种情况下，为了真正地 触发一次重新渲染，需要创建一个新对象并把它传递给 state 的设置函数：

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

通过使用 setPosition，在告诉 React：

  • 使用这个新的对象替换 position 的值
  • 然后再次渲染这个组件

现在可以看到，当在预览区触摸或移动光标时，红点会跟随着指针移动：

import { useState } from 'react';
export default function MovingDot() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0
  });
  return (
    <div
      onPointerMove={e => {
        setPosition({
          x: e.clientX,
          y: e.clientY
        });
      }}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
      }}>
      <div style={{
        position: 'absolute',
        backgroundColor: 'red',
        borderRadius: '50%',
        transform: `translate(${position.x}px, ${position.y}px)`,
        left: -10,
        top: -10,
        width: 20,
        height: 20,
      }} />
    </div>
  );
}

使用展开语法复制对象

在之前的例子中，始终会根据当前指针的位置创建出一个新的 position 对象。但是通常，会希望把 现有 数据作为所创建的新对象的一部分。例如，可能只想要更新表单中的一个字段，其他的字段仍然使用之前的值。

下面的代码中，输入框并不会正常运行，因为 onChange 直接修改了 state ：

import { useState } from 'react';

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

  function handleFirstNameChange(e) {
    person.firstName = e.target.value;
  }

  function handleLastNameChange(e) {
    person.lastName = e.target.value;
  }

  function handleEmailChange(e) {
    person.email = e.target.value;
  }

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

例如，下面这行代码修改了上一次渲染中的 state：

person.firstName = e.target.value;

想要实现需求，最可靠的办法就是创建一个新的对象并将它传递给 setPerson。但是在这里，还需要 把当前的数据复制到新对象中，因为只改变了其中一个字段：

setPerson({
  firstName: e.target.value, // 从 input 中获取新的 first name
  lastName: person.lastName,
  email: person.email
});

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

setPerson({
  ...person, // 复制上一个 person 中的所有字段
  firstName: e.target.value // 但是覆盖 firstName 字段 
});

现在表单可以正常运行了！

可以看到，并没有为每个输入框单独声明一个 state。对于大型表单，将所有数据都存放在同一个对象中是非常方便的——前提是能够正确地更新它！

import { useState } from 'react';

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

  function handleFirstNameChange(e) {
    setPerson({
      ...person,
      firstName: e.target.value
    });
  }

  function handleLastNameChange(e) {
    setPerson({
      ...person,
      lastName: e.target.value
    });
  }

  function handleEmailChange(e) {
    setPerson({
      ...person,
      email: e.target.value
    });
  }

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

请注意 ... 展开语法本质是“浅拷贝”——它只会复制一层。这使得它的执行速度很快，但是也意味着当想要更新一个嵌套属性时，必须得多次使用展开语法。

更新一个嵌套对象

考虑下面这种结构的嵌套对象：

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 的值，用 mutation 来实现的方法非常容易理解：

person.artwork.city = 'New Delhi';

但是在 React 中，需要将 state 视为不可变的！为了修改 city 的值，首先需要创建一个新的 artwork 对象（其中预先填充了上一个 artwork 对象中的数据），然后创建一个新的 person 对象，并使得其中的 artwork 属性指向新创建的 artwork 对象：

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

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

setPerson({
  ...person, // 复制其它字段的数据 
  artwork: { // 替换 artwork 字段 
    ...person.artwork, // 复制之前 person.artwork 中的数据
    city: 'New Delhi' // 但是将 city 的值替换为 New Delhi！
  }
});

这虽然看起来有点冗长，但对于很多情况都能有效地解决问题：

import { useState } from 'react';

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

  function handleNameChange(e) {
    setPerson({
      ...person,
      name: e.target.value
    });
  }

  function handleTitleChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        title: e.target.value
      }
    });
  }

  function handleCityChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        city: e.target.value
      }
    });
  }

  function handleImageChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.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}
      />
    </>
  );
}

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

如果 state 有多层的嵌套，或许应该考虑 将其扁平化。但是，如果不想改变 state 的数据结构，可以使用 Immer 来实现嵌套展开的效果。Immer 是一个非常流行的库，它可以让你使用简便但可以直接修改的语法编写代码，并会帮你处理好复制的过程。通过使用 Immer，写出的代码看起来就像是“打破了规则”而直接修改了对象：

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

但是不同于一般的 mutation，它并不会覆盖之前的 state！

尝试使用 Immer:

  1. 运行 npm install use-immer 添加 Immer 依赖
  2. 用 import { useImmer } from 'use-immer' 替换掉 import { useState } from 'react'

下面我们把上面的例子用 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}
      />
    </>
  );
}

package.json：

{
  "dependencies": {
    "immer": "1.7.3",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "use-immer": "0.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

可以看到，事件处理函数变得更简洁了。可以随意在一个组件中同时使用 useState 和 useImmer。如果想要写出更简洁的更新处理函数，Immer 会是一个不错的选择，尤其是当 state 中有嵌套，并且复制对象会带来重复的代码时。

摘要

  • 将 React 中所有的 state 都视为不可直接修改的。
  • 当在 state 中存放对象时，直接修改对象并不会触发重渲染，并会改变前一次渲染“快照”中 state 的值。
  • 不要直接修改一个对象，而要为它创建一个 新 版本，并通过把 state 设置成这个新版本来触发重新渲染。
  • 可以使用这样的 {...obj, something: 'newValue'} 对象展开语法来创建对象的拷贝。
  • 对象的展开语法是浅层的：它的复制深度只有一层。
  • 想要更新嵌套对象，需要从更新的位置开始自底向上为每一层都创建新的拷贝。
  • 想要减少重复的拷贝代码，可以使用 Immer。
木蓝茶陌*_*
关注
专栏目录
React系列： setState以及setState更新机制
haoyanyu_的博客
09-27 2201
在React中，数据是自顶向下单向流动的，即从父组件到子组件。这样组件之间的关系变得简单并且可预测。 state和props是React组件中最重要的改建，如果顶层组件初始化props, 那么React会向下遍历整颗组件树，重新尝试渲染所有的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内部改变。 当组件内部使用内置方法setState时，该组件就会尝试重新渲染，因为我们改变...
React中setState修改深层对象
weixin_34355559的博客
02-16 1509
摘要： React中setState修改深层对象 在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: state = { list: { objA: { name: 'A', age: 20 }, ...
React useState修改对象
最新发布
前端江湖
05-25 658
在 React 中，useState 是一个 Hook，它可以让函数组件拥有状态。当想要改变一个对象类型的状态时，我们需要使用展开运算符（...）或者 Object.assign 来确保状态是正确地更新。
React Hooks之useState
linfeng_meng的博客
09-23 887
Hooks 的最大的作用就是可以让你在不编写`class`的情况下使用`state`以及其他的 React 特性。而 `useState` 的功能就是让你在函数式组件中使用 `state`。
react中状态是对象，怎么更新这个对象的值？
imkaifan的博客
10-25 1060
// 状态的值 const titleSelectedStatus = { area: false, mode: false, price: false, more: false, }; // 当状态的中的某个属性变了，怎么更新？ onSave = (type,value) => { this.setState(() => { return { openType: "", selectedValue: {
React监听对象型State的变化&立即更新state
luotouzi的博客
09-07 9795
描述 很多时候，我们需要在页面渲染之前先加载出需要呈现的state，如下面例子——在渲染Select组件前，首先先需要将point数组加载出来 <Select placeholder="选择地点" onChange={(value) => { ... }} > { point.map((value, key) => <Select.Option value={value}>{value}</Select.Option> ) }
compose-state：在React中编写多个setState或getDerivedStateFromProps更新器
02-26
compose-state是在React中组成多个compose-state器的库。 compose-state与标准setState参数（对象或函数）一起使用，因此您无需学习任何新语法。 它还与React的新生命周期方法兼容。 使用 安装 yarn add compose-...
简单手写实现React类组件的state批量更新
小王的技术库
11-07 674
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
React中的setState更新state是同步还是异步的？
Always-Learning
07-15 966
问题引入 React中的setState是用来更新状态的重要工具，但是setState是同步的还是异步的，需要我们进行一定的探讨，接下来让我们好好研究研究。 使用setState的两种形式 函数形式的setState test1 = () => { // 函数形式的setState,函数形式的setState能够接收到两个参数，一个是state，另一个是props this.setState(state => ({count: state.count +
react学习笔记之state以及setState的使用
11-27
在React中，状态（state）是一个对象，用于存储组件的内部数据。与属性（props）不同，属性是从父组件传递给子组件的数据，而状态是组件自身拥有的数据，可以由组件自身修改。你可以将状态类比于Vue框架中的data属性...
react里做一个修改效果_修改state（react）中的某一个对象中的单个参数
weixin_39573512的博客
12-18 1168
react项目中我们经常会涉及到修改state中参数的问题，如果参数为常用的基本类型变量，我们可以直接通过this.setState({...})方法来进行修改，但是如果变量为一个对象我们要如何修改呢？我们要修改对象中的一个值或几个值而保证其它参数不会受到影响，如state中含有pagintion对象，就是我们常用的分页对象。对于这种情况我们首先想到的就是先将对象整体保存下来，然后将对象中的值修改...
react开发，state中某个属性为对象或数组时，需要修改该对象中的某一个属性
weixin_40670909的博客
03-29 6821
1.设置state对象 state={ code:{ total:'', 1st:'', 2nd:'', 3rd:'', thd:‘’ }, } 2 修改state对象 SetCode=(e)=>{ let val=e.target.value; let data = Object.as...
React中setState()更新状态的两种写法及相关问题
m0_59183852的博客
10-25 1408
React中setState()更新状态的两种写法及相关问题
在react中正确修改state
热门推荐
蜗牛不会跑
07-01 3万+
一，在react中可以通过this.state.{属性}的方式直接获取state，但是当我们修改state的时候，往往有许多的坑需要注意。以下 为三种常见的陷阱：1，不能直接修改state。 组件修改state，并不会重新触发render。列如：//错误this.state.title='React';正确修改方式是使用setState（）；//正确this.setStat...
react useState hook 数组对象更新机制
万伏小太阳
08-06 5589
react组件的更新机制只对数组进行的一个浅对比，也就是说没有改变它的引用地址，所以我们要改变数组时应该进行一次拷贝。为了更好地理解这个hook，理解这个数组对象的更新机制，我写了一个很简单的增删改的小案例。......
React中 setStatez中数组和对象的修改方式？
m0_70060803的博客
07-11 1728
使用场景;多层级和单一层级都存在。缺点：|写法麻烦,单次对象赋值,对象层级多的时候,容易遗漏。
11. React 中使用 useState Hook 更新数组和对象
qq_44438941的博客
03-17 2225
当状态更新时，它会被完全覆盖。如果我们的状态是具有多个属性的对象，但您只想更改某个属性的值怎么办？
React中setState更新机制、batchUpdate机制和transaction事务机制
祥哥的说
02-13 3662
React中setState的有关问题 1、react的setState是如何更新的？ 2、setState是同步的还是异步的？ 3、setState什么时候合并，什么时候不合并？ 核心要点： 1、react的setState是如何更新的？ setStated的执行原理： setState接收一个新的状态 该接收到的新状态不会被立即执行么，而是存入到pendingStates（等待队列）中 判断isBatchingUpdates（是否是批量更新模式） 1>. isBatchingUpdate
从一个 bug 探究 React 里面 state 的更新机制
weixin_34123613的博客
03-25 771
github的地址 欢迎 star! 最近同事遇到一个 react 组件延迟渲染的问题，最后发现是由于对状态的更新理解不到位导致。具体问题描述： 问题产生 // 在 parent.js 组件里面有这样的函数以及一个 Child 的子组件 // 点击按钮触发 roleId 改变，发起异步请求请求后端得到数据 data <!-- parent.js--> this.state.data...
react中，state是什么？
08-07
setState()方法接受一个新的state对象作为参数，并将其合并到当前的state中。 State的更新可能是异步的，React会将多个setState()调用合并成一个单一的更新，以提高性能。因此，在更新state时，应该使用函数形式的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值