使用嵌套对象(挂钩)在react中不更新状态
在React中，使用嵌套对象（挂钩）不会触发状态更新。React中的状态更新是基于对象的浅比较机制，只有当状态对象的引用发生变化时，React才会重新渲染组件。
嵌套对象指的是在状态对象中存在对象的嵌套结构。当我们直接修改嵌套对象中的属性时，状态对象的引用并没有发生变化，因此React无法检测到状态的变化，也就不会触发组件的重新渲染。
为了解决这个问题，我们需要使用不可变性来更新状态。不可变性是指状态对象在被创建后不可被修改，而是通过创建新的对象来代替原有的对象。这样做的好处是可以确保状态的变化被正确地检测到，从而触发组件的重新渲染。
在React中，可以使用一些库或者技术来实现不可变性，例如Immer、Immutable.js等。这些库可以帮助我们方便地创建新的状态对象，并且保持性能的同时进行状态更新。
对于React中的状态更新，推荐使用腾讯云的云开发产品。云开发是一款面向前端开发者的云原生后端一体化解决方案，提供了丰富的云函数、数据库、存储等功能，可以帮助开发者快速搭建和部署应用。通过云开发，我们可以方便地管理和更新状态对象，实现React组件的重新渲染。
腾讯云云开发产品介绍链接：https://cloud.tencent.com/product/tcb
相关·内容
2回答
假设我有这个React组件：
class SomeComponent extends Component {
constructor(props) {
super(props);
this.state = {
topObject: {
childObject1: {
grandChildObj1: {
attr1: this.props.val1,
attr2: this.props.val2
浏览 0提问于2018-10-31得票数 0
React有没有等同于Vue.set()的东西(也就是这个.$set)？它使Vue能够更新对象并向属性添加反应性(而不是替换整个对象)。
浏览 60提问于2019-12-12得票数 2
1回答
我一直在尝试通过阻止下面示例中的容器组件在每次子组件更新时重新呈现来优化应用程序。当UsersList组件的输入发生变化时，如何预渲染EditableRow组件？谢谢。链接代码：https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx
浏览 17提问于2021-10-22得票数 1
我想知道什么可以存储，什么不能存储在redux存储中，以及为什么不能存储哪些不能存储。
我听说我不应该存储Class的实例，因为它们不容易序列化(.？)
像这样的功能呢？
function person(firstName, lastName) {
let _firstName = firstName;
let _lastName = lastName;
return {
fullName: `${_firstName} ${_lastName}`
}
}
另外，我想知道我是否不应该存储类的实例，为什么redux建议将immutable.js对
浏览 4提问于2017-10-12得票数 5
回答已采纳
4回答
从几个月以来，我一直在使用React，而且React并不只是简单地重新呈现一个组件，而是找到了不同之处，并进行了这些更改。角质2做这样的事吗？
而且，当检测到状态变化时，角2是否重新呈现根节点中的所有组件，还是只重新呈现那些检测到变化的特定组件及其子树？
浏览 5提问于2016-04-24得票数 5
回答已采纳
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
1回答
我使用相同的操作负载在具有相同内容的状态上设置两个不同的值。 这样，我就可以在原始数据发生任何更改之前获得原始数据，并在最后进行比较，如下所示： onLoadUserDataSuccess
userData: action.payload
originalUserData: action.payload 问题是，当我有一个更新用户数据的操作，但只更改了userData的值，而不是originalUserData时，我可以在devtools中看到这两个值都更改了。示例： onUserDataUpdate
userData: action.payload 我能想到的唯一原因是，不知何故，这是
浏览 12提问于2019-06-06得票数 0
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
Rendering: 0
Triggered: 0
Rendering: 4
Triggered: 4
Rendering: 4
我很难理解为什么。
首次渲染：
将index设置为0。
运行useEffect，因为undefined不是0
useEffect请求将index设置为4
第二次渲染：
index是4
为什么useEffect身体会再次被执行？
第三次渲染：
为什么要重新渲染？
我期望的是：
Rendering: 0
Triggered: 0
浏览 1提问于2022-01-19得票数 2
回答已采纳
3回答
我的状态在我的redux存储中是Immutable.js类型，并且我只在我的reducers中更改了状态。跳过使用不可变，让解析器根据命令检查我的应用程序，并在我在reducer函数之外更改存储时发出警告，这不是更有意义吗？或者有没有一个很好的理由来解释为什么不这样做？
浏览 3提问于2016-09-23得票数 4
2回答
假设当我的React运行时，它连接到一个MQTT代理，其中数据被发送到应用程序。然后，这些数据存储在一个看起来像这样的对象中：
var data = {
shoeColor1: 'blue',
shoeColor2: 'red'
shoeColor3: 'orange'
}
下面的React组件显示该数据。
import React, {Component} from 'react';
import { Button } from 'react-native';
export
浏览 4提问于2021-03-08得票数 0
回答已采纳
1回答
我有一个react组件，它包装了一个类，它使用DOM使用WebGL呈现three.js，并连接mobx存储值，并且它随类生命周期方法的变化而变化。
在mobx存储中传递的只在生命周期函数中的组件呈现函数之外使用(componentDidMount，componentDidUpdate，.)。注意到，当存储更改时，组件不会触发重登。但是，我在呈现函数中做了一个无用的读取，例如在下面的示例中，将一个triggerRerenderListenerProp={this.props.store.debugSettings.showStats}支柱传递给div，组件只会激活到store.debugSett
浏览 4提问于2017-11-19得票数 3
回答已采纳
2回答
Tac趾反应
、、、
我在“反应”中写了这个抽搐脚趾游戏。我正在学习反应。欢迎反馈。我故意用单一的文件，专注于反应而不是其他方面。
<!-- 3x3 Tic tac toe implementation in React JS. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Tic Tac Toe</title>
<!-- Import react -->
<script src=
浏览 0提问于2017-03-21得票数 2
2回答
我在我的React应用程序中使用Redux，并且为了确保我不会改变状态，而是返回新的状态，我在开发中添加了中间件。
我的问题是，当发生更改时，我的所有组件是否都在重新生成？
我正在看这个关于ImmutableJs的视频，现在我不知道我是否应该在每个具有shallowEqual功能的组件中实现shouldComponentUpdate，还是这件事是通过自动反应来完成的？(也许它是在新版本中修改的)
它是否会困扰我？当我不使用ImutableJ并使用最新的React和Redux版本时，最好的方法是什么？
浏览 4提问于2016-04-23得票数 1
回答已采纳
当使用对象数组时，我对ImmutableJS的功能感到有点困惑。下面的示例显示，即使列表x是不可变的，我仍然可以使用不变量List的update()函数来修改列表中对象的属性。
我的问题是，如果我仍然可以修改对象的内容，我为什么要使用不变的？我希望这个模块能保护我不受伤害。我意识到我无法在列表中添加或删除整个对象，但这并不能完全保护我不修改列表，在处理处于React状态的列表时，我不希望这样做。
我注意到的另一件有趣的事情是，当我在第一次执行更新后直接修改名称时，x.get(0).name和y.get(0).name都被更改了。我认为update()产生的列表不会包含对列表中相同对象的引用。
浏览 3提问于2016-03-21得票数 1
回答已采纳
我使用的是React 16.4.1和React路由器-Dom 4.3.1。我已经构建了一个侧栏反应组件，使用一个web组件，您将数据传递到web组件中，这将呈现该组件。
这是侧栏组件。
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { Redirect } from 'react-router-dom';
class Sidebar extends React.Comp
浏览 0提问于2018-09-20得票数 2
回答已采纳
2回答
我试着在测试中增加计数器，但是当我按下按钮时，值不会改变。我使用了React测试库中的fireEvent和，但是在10.I中的值仍然是Resive18。
CounterApp：
import {useState} from "react";
import PropTypes from "prop-types";
const CounterApp = ({value=10})=>{
const [counter,setCounter] = useState(value);
const handleAdd= ()=>{
setCounte
浏览 3提问于2022-04-19得票数 0
2回答
在我的React应用程序中，状态中有一个名为parameters的对象，它表示一棵树。
下面是我的parameters对象：
{
"Access_List": {
"state": "override",
"value": {
"88": {
"state": "inherit",
"value": [{
浏览 16提问于2019-08-13得票数 1
在ES6中，还有其他方法来声明变量，如let和const
使用const声明的变量不能重新分配或重新声明。
为什么在React应用程序中有这么多的const声明，使用const对var和let有什么不同的好处？
浏览 2提问于2017-07-05得票数 0
回答已采纳
在本例中，componentDidUpdate是在设置状态跟踪时触发的。HelloMessage道具和状态没有改变，所以为什么要调用这个方法？如何防止这种情况发生？
class HelloMessage extends React.Component {
componentDidUpdate(prevProps, prevState) {
console.log('HelloMessage did update');
}
render() {
return <div>Hellooo</div>;
}
}
class A
浏览 0提问于2018-08-17得票数 1
回答已采纳
4回答
我目前正在学习redux和redux的反应，并且知道不变性是这些技术的关键组成部分，但我很难完全理解如何实现它。
因此，我想知道是否有关于react/redux不可变性的备忘单？
如果不是，在您的redux应用程序中实现不可变性的首选方法是什么？
浏览 5提问于2016-05-10得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
