为什么要在更改react状态之前或在处理它时克隆react状态？
在React中，我们经常需要更新组件的状态(state)。然而，直接修改状态可能会导致不可预测的行为和潜在的bug。为了避免这些问题，我们通常会在更改或处理React状态之前先进行克隆。
克隆React状态的主要原因有以下几点：
- 避免直接修改原始状态：React中的状态对象是引用类型，直接对状态进行修改可能会影响其他组件或模块。通过克隆状态对象，我们可以确保在处理状态时不会影响原始状态，从而避免出现潜在的副作用。
- 提供不可变性：React鼓励使用不可变数据来管理状态。克隆状态可以创建一个全新的状态对象，确保状态的不可变性。这对于实现高效的组件更新、性能优化和调试非常重要。
- 支持时间旅行和撤销功能：通过克隆状态对象，我们可以轻松实现时间旅行和撤销功能，即回溯到先前的状态。这对于调试和修复bug非常有帮助。
- 方便进行状态比较：克隆状态对象使我们能够轻松比较先前的状态和当前的状态，以确定状态是否发生了变化。这对于确定何时重新渲染组件以及如何处理组件的更新非常重要。
在处理React状态时，通常会使用深拷贝或浅拷贝来克隆状态对象。具体选择哪种方式取决于你的需求和场景。
总之，克隆React状态可以确保状态的不可变性、避免副作用和bug，并提供方便的状态比较和更新机制。这是保持React应用程序稳定和可靠的重要步骤。
在腾讯云的产品生态中，可以使用腾讯云的云开发(CloudBase)服务来构建基于React的应用程序。云开发提供了全栈云托管、云函数、数据库和云存储等功能，使开发人员能够快速搭建和部署React应用。你可以通过腾讯云云开发的官方文档了解更多相关信息：腾讯云云开发。
相关·内容
因此，我试图将一些道具从顶层组件传递给子组件，我已经在网上进行了一些搜索，但找不到任何显示如何通过this.props.children 传递的值的组件状态。这是我的密码。
布局(父)：
export default class Layout extends React.Component {
constructor (props) {
super(props)
this.state = { data: 'test' }
}
render() {
const {location} = this.props;
浏览 5提问于2017-02-14得票数 4
回答已采纳
有人告诉我，每当我使用react状态或更改它时，我都应该对其进行克隆或复制。 const cloneState = [...this.state]
cloneState.name = 'hardik' 但我不确定为什么人们会推荐它，为什么我不能直接改变状态？ 为什么我不能直接使用它呢？ this.setState({name: 'hardik'})
浏览 35提问于2020-07-24得票数 3
1回答
我搞不懂为什么useState不从它的参数props中设置变量。 该片段为： import React, { useState } from 'react';
const FormContainer = (props) => {
console.log('[FormContainer props]', props); // line 7
const [prevState, setPrevState] = useState(props);
console.log('[FormContainer]', prevState);
浏览 21提问于2019-03-24得票数 1
回答已采纳
1回答
我使用recoiljs作为我的react项目的状态管理器，当反冲原子从另一个文件更改时，我的一个组件不会调用它的useEffect。下面是我的主要组件，它从一个原子读取。 import React, {useState, useEffect} from 'react'
import '../css/MeadDeadline.css'
import {getNearestDate} from '../chromeAPI/retrieveDeadlineJSON'
import DeadlineList from '../atoms/de
浏览 16提问于2021-01-12得票数 0
回答已采纳
3回答
使用ReactJS显示新的列表项
、、、、
在单击按钮时，我在更新数组并将数组显示为列表项时遇到问题。从下面的代码中，我得到了错误消息：
list.map不是一个函数
import React from "react";
export default class InputPushToList extends React.Component {
constructor(props) {
super(props);
this.state = {
ActiveText: "",
li: ["First Item"]
};
浏览 0提问于2018-12-19得票数 0
回答已采纳
为什么“初始结果”和“最终结果”在控制台中是相同的，尽管html中的state.result是不同的和正确的？我搞错了吗？我希望有一个文本输入，以更新结果时，您键入。另外，当你删除一封带有退格的信件时，它不会更新。
我在控制台中打印了值，但这是因为值是过去的，而不是当前的。
import React from 'react';
export default class TQValueCalculator extends React.Component {
constructor(props) {
super(props);
this.state = ({re
浏览 0提问于2019-01-23得票数 1
回答已采纳
我已经在中创建了动态表单--React本机，如果用户单击该按钮，它将在按钮上方添加新表单。用户点击按钮的时间，它会添加那么多的表单。我已经做到了，但我面临的问题，在文本更改。
问题是，当我开始输入表单时，它首先显示秒的分数值，然后变为空值。
下面的是我尝试过的代码
import React, { PureComponent } from 'react'
import {
Text,
View,
TextInput
} from 'react-native'
import { TouchableOpacity } from '
浏览 2提问于2019-08-07得票数 1
1回答
我正在尝试用react构建一个简单的树形菜单。我发现this video确切地显示了我想要实现的目标(his Codepen)。我能够实现他的方法，但出于好奇心，我尝试使用钩子复制相同的方法。我最终得到了这个(简化的)： my Codepen const App2 = () => {
const [selectedOptions, setSelectedOptions] = React.useState({});
React.useEffect(() => {
console.log(selectedOptions);
},[selectedOpt
浏览 22提问于2020-06-21得票数 0
回答已采纳
3回答
我有一些简单的代码：
class App extends React.Component {
state = {
letters: ["a", "b", "c"]
};
addLetter = () => {
const { letters } = this.state;
letters.push("d");
this.setState({ letters });
};
render() {
return (
<div>
浏览 2提问于2018-04-30得票数 3
回答已采纳
我正在尝试使用chartjs-2来呈现带有数据的条形图。下面是我的代码：
import React from "react";
import { Bar, Line, Pie } from "react-chartjs-2";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
chartData: {
labels: ["Nike", "
浏览 3提问于2018-10-09得票数 0
1回答
不知道这里发生了什么或者为什么，好像当我在游标上迭代时它会移动它，因为我不能从相同的起点运行第二个循环。我的例子：
players = db.player.find({'parent_api__id' : 'stats', 'game__id':{'$in':games_list}, "played":"true"});
count = 0;
for c in players:
count = count + 1
for c in players:
game = db.game.
浏览 2提问于2014-08-29得票数 1
我的react应用程序中有一个ToDo组件和一个Item组件。我注意到，当我从Item组件触发我的onDelete函数时，它只有在我创建item组件时所处状态中的tdList状态变量。为什么会发生这种情况，我如何解决这个问题。
function ToDo() {
const [tdList, setTD] = useState([]);
const [item, setItem] = useState("");
const onDelete = (id) => {
// console.log(id);
consol
浏览 2提问于2022-09-16得票数 0
回答已采纳
1回答
我想知道React是如何在内部管理状态的。 更多地告诉您，我想知道useState()的内部是如何工作的，所以状态是反应性的！ useState()；我知道钩子提供了状态和状态更改函数作为返回值。 const [testState, setTestState] = useState('test'); 我很想看看它在React内部是如何工作的。
浏览 16提问于2021-09-17得票数 0
在使用Immutable.js时，我一直在寻找React.js动机。正如我所理解的，React.js应该保证属性的不可变性。但是，我可以更改视图属性。
var Hello = React.createClass({
render: function() {
var item = { prop: 128 };
return <Test item={item} />;
}
});
var Test = React.createClass({
render: function() {
this.props.ite
浏览 2提问于2015-09-22得票数 2
回答已采纳
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
3回答
在这里，数组(布尔值)：
const [state, setState] = React.useState({
[`${"checkedA"+index}`]: false, //checkedA0
[`${"checkedB"+index}`]: false, //checkedB0
[`${"checkedC"+index}`]: false, //checkedC0
[`${"checkedD"+index}`]: false, //checkeD0
});
问题代码是：
c
浏览 2提问于2020-05-07得票数 0
所以我使用redux在我的react本地应用程序中持久化状态，一切都很好。
对于还原器，我使用switch-case检查不同的操作类型，对于默认情况，我返回状态。
initialState = {
first: null,
second: null,
};
export default myReducer = (state = initialState, action) => {
switch (action.type) {
case ...:
... // Handling some cases which work fine
de
浏览 4提问于2021-05-29得票数 2
回答已采纳
我想用github动作构建这个项目。但我有个错误，在步骤“为devtools构建”。工作流和错误如下所示。
工作流：
jobs:
build:
runs-on: ubuntu-18.04
steps:
- name: setup node.js environment
uses: actions/setup-node@v2.1.5
with:
node-version: 14
- name: install yarn
run: sudo npm install
浏览 1提问于2021-06-19得票数 0
import React, { useState } from "react";
function HookCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count {count}</button>
</div>
);
}
export default HookCounter;
每次需要重新渲染时，React
浏览 1提问于2019-11-08得票数 9
15回答
我想问为什么当我做一个onClick事件时，我的状态没有改变。我已经搜索了一段时间，我需要在构造函数中绑定onClick函数，但是状态仍然没有更新。
这是我的密码：
import React from 'react';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import BoardAddModal from &
浏览 23提问于2016-12-22得票数 162
回答已采纳
3回答
我真的很困惑如何在React中对空数组执行useState
import "./styles.css";
import text from "./text.js";
import React, { useState } from "react";
export default function App() {
let allTheWords = text.split(" ");
let countData = [];
let theWordCount = {};
const createTable = () =&
浏览 3提问于2021-10-14得票数 1
我有一个正在被调用的组件，然后用更新的信息再次调用，但是var topics并不是由react更新的。有人能解释为什么第一个示例没有在屏幕上更新，而第二个示例更新了吗？它与useState调用有关吗？
App.js在初始呈现期间调用DisplayQuestions一次，然后页面接受用户输入并重新呈现。
<DisplayQuestionsByTopic topics={topics} />
.....
没有在屏幕上更新主题var：
export function DisplayQuestionsByTopic(props) {
console.log(`DisplayQues
浏览 2提问于2021-02-21得票数 1
回答已采纳
import React, {useState, useEffect} from 'react';
import MakeCard from './MakeCard.js';
export default function GameCards(props) {
const [images, setImages] = useState([{}]);
// Render component after fetching images
useEffect(() => {
getImages(props.cards).then(imag
浏览 47提问于2021-03-24得票数 0
回答已采纳
与标题一样，我在调用()时，对于idToken和accessToken值将获得null。
代码(与中的示例相同)：
export async function googleLogin() {
try {
// add any configuration settings here:
await GoogleSignin.configure();
const data = await GoogleSignin.signIn();
google-services.json文件已经就位，以前运行良好。在从Reactive0.59.9迁移到0.
浏览 1提问于2019-12-29得票数 1
1回答
谢谢你读了我的第一个问题。
我试图使用共享的根的使用反应，反应-路由器和防火墙。因此，我想保持App.js的用户状态。但是当我试图刷新浏览器时，没有找到用户状态。
我试着把钱存起来。但是，在不使用localStorage的情况下，浏览器刷新后是否可以保持组件的状态？
App.js
import React, { Component, PropTypes } from 'react'
import Rebase from 're-base'
import auth from './config/auth'
const base = Rebas
浏览 6提问于2016-05-12得票数 13
回答已采纳
我创建了一个文本输入框，在提交时，它将更新父组件中消息的状态。父组件中的消息传递到消息显示。我希望负责显示消息的组件在每次提交后更新和显示消息，但不知道如何进行。我在这里做了一个代码沙箱：
这是我的密码：
父组件：
import React, { Component } from "react";
import Messages from "./Messages";
import Input from "./Input";
export default class Container extends Component {
constru
浏览 5提问于2019-09-18得票数 1
回答已采纳
目前，我有一个表类如下：
import React from "react";
import "./Table.css";
export default function Table({theadData, tbodyData}) {
return (
<>
<table>
<tr>
<th></th>
<th>2017</th>
</tr>
{Array
浏览 1提问于2022-10-11得票数 0
回答已采纳
2回答
我不知道为什么我的react应用程序在我刷新状态后不能更新。我正在显示一个表格，其中的行可以通过单击突出显示。当在触摸屏上向下滑动时，它应该会重新加载。动画正在显示，但表没有更新，并且突出显示保持不变。 我提供了一个小的代码示例。如果这篇文章需要更多代码或信息，请随时发表评论。 提前谢谢。 const dummyKonten = [
{ id: 1,
icon: 'a',
name: 'Sparkasse',
isSelect: false },
{ id: 3
浏览 80提问于2021-02-25得票数 1
回答已采纳
我将一个组件(C)作为道具传递给父组件(A)内的一个子组件(B)。A的状态也被传递给C，并映射到C的状态。但是当我相应地更新A的状态和B的状态时，C的状态不会更新。 我的代码如下所示：(导入语句被省略) const Parent = (props) => {
.............(other state)
const [info, setInfo] = React.useState(props.info);
const handleDataChanged = (d) => { setInfo(d); }
return (
浏览 29提问于2019-12-14得票数 2
回答已采纳
我正在尝试了解有关react组件中的状态的最佳实践。我通过编写一个TextField组件开始创建表单，如下所示
var TextField = React.createClass({
render: function() {
const {value, title, placeholder} = this.props;
return (<div>
{title}
<input type="text"
value={value}
浏览 3提问于2016-02-23得票数 1
1回答
所以，我有一个关于在react中构建一个战争纸牌游戏的项目，这个游戏很简单--一整副纸牌相当于52张纸牌。这52张牌需要分成26张牌，供玩家和计算机使用。 播放器是一个具有属性的对象，例如： {name:'Oded', wins:0, loses:0, gamenumber:0,deck:[]} 在开始时，你需要一个“登录”主页，用户在这里写下他的名字，按下“开始”按钮后，用户按下按钮，系统需要“分割”fullDeck为26张卡。对于添加播放器的问题，我使用了这个函数： let addPlayer=(name)=>{ //Send
浏览 7提问于2020-12-23得票数 0
创建组件时，定义this.state。然后，在调用setState之后，用某种方式将旧的和新的状态分解为两个对象。例如，使用钩子shouldComponentUpdate，我们可以像这样区分这两种状态：
shouldComponentUpdate(nextProps, nextState) {
return (this.state.foo != nextState.foo);
}
我从github下载了React源代码，并找到了调用这些函数的地方，但很快就很难跟踪到底发生了什么。我从来没有发现这种分裂(或者不管他们如何实现这种行为)发生在哪里。我确实发现，简单的比较是/可以通过Reac
浏览 5提问于2020-09-09得票数 1
回答已采纳
以下是我的react应用程序中的一个函数：
handleSubmit(evt) {
evt.preventDefault();
this.setState({
width: "",
height: "",
color: ""
});
console.log(this.state)
};
在输入中，我将输入的值设置为宽度、高度和颜色。这个handleSubmit函数是在填充表单时发生的。
但是，我已经通过setState在console.log线之前设置了状态。因此，在调用console.log之前，这将替换
浏览 3提问于2019-11-04得票数 0
回答已采纳
我是react js的新手。在这里，我有以下组件，它没有被调用。
export const BG: React.FunctionComponent<Icard> = ({
const state = useLocalStore(() => ({
id = url
setId(url) {
state.id = url
}
}))
const changeImage = () =? {
}
React.useEffect(() =>
浏览 2提问于2020-04-17得票数 2
1回答
在过滤API调用收到的数据后，我在显示结果时遇到了问题，我的猜测是它正在尝试在收到数据之前过滤数据，这就是为什么它没有显示。我只是通过将filterAnswers()设置为setTimeout函数来获得数据，但它一直循环到崩溃为止。知道如何只过滤correct_answers并将其保存到状态吗？
const [quiz, setQuiz] = React.useState([])
const [correctAnswers, setCorrectAnswers] = React.useState(filterAnswers())
React.useEffect(() => {
fe
浏览 5提问于2022-10-18得票数 0
回答已采纳
我正在看一个在react with state中绑定输入的教程。我不明白的是，为什么我需要将它绑定到状态，而不是局部变量，因为它不会导致渲染。 在我的例子中，我有一个登录表单，在本教程中，它是发送消息表单。其思想是在提交时使用反向数据流将值发送到App.js(父级)。它看起来是这样的： class Login extends Component{
constructor(){
super()
this.state = {
username: ''
};
this.login =
浏览 61提问于2019-06-10得票数 1
回答已采纳
我无法解决以下组件的问题，以及为什么会导致错误(当我试图通过webpack创建js文件时出现了错误)。在代码中添加{...this.state.options}时会出现此问题
组件
import React from 'react';
var BoxCountComponent = React.createClass({
getInitialState: function () {
return {
options:[]
}
},
componentDidMount: function () {
for (let i=0; i<
浏览 1提问于2016-09-08得票数 2
回答已采纳
我正在用ReactJS编写一个项目。我有一些用户可以点击的div。默认情况下，每个div的背景颜色都应该设置为绿色，但在单击之后，它应该会变成红色(这意味着这个特定的div已经被单击了，再单击它也不会有任何不同)。我设置CSS类的想法是，在className内部，我有一个三元if语句，它基于数组中的相应值。我提出的解决方案没有做任何事情，没有错误弹出。我怎样才能实现我的目标？
代码：
var style = require('./board.css');
var React = require('react');
class board extends Re
浏览 0提问于2017-05-28得票数 1
我有这样的react组件：
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'
export default class Footer extends Component {
constructor(props) {
super(props)
this.state = {
visible: f
浏览 2提问于2017-07-30得票数 1
3回答
当我使用new关键字创建特定类的新对象时，它会占用堆中的一些内存，例如，我有Xyz类，而我正在使用new关键字创建Xyz的对象，它会占用堆中的一些内存
Xyz xyz = new Xyz();
现在假设xyz具有内存位置12@FFD
使用克隆方法创建相同对象
Xyz xyzClone =(Xyz) super.clone()
我的问题是，如果xyzClone在堆中占用的内存与xyz不同，那么为什么我们需要克隆方法，我们可以使用new关键字实现相同的行为？如果xyzClone不占用额外的内存，那么它的行为就像单例一样
请澄清我的困惑，为什么我们需要克隆方法？
浏览 3提问于2014-11-17得票数 0
1回答
我正在构建一个简单的俄罗斯方块应用程序，在其中我有可以点击的按钮的gameoby。 目前它是一个react应用程序，我处理点击的方式定义如下： const [keyPressed, setKeyPressed] = useState([])
const onKeydown = (e) => {
const currentKey = e.key.toLowerCase()
const localKeyPressed = [...keyPressed]
localKeyPressed.push(currentKey)
setKeyPressed(l
浏览 12提问于2021-03-25得票数 0
回答已采纳
我刚接触react和react原生，并试图了解React组件的生命周期……我的屏幕上有四个开关。我尝试将开关的当前状态保存为对象(应用的过滤器)，然后将其传递给导航道具的参数，并在导航标题中保存按钮的onPress函数中访问它。 import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import { HeaderButtons, Item } from '
浏览 79提问于2020-10-20得票数 0
5回答
下面是我的组件类。该组件似乎从未执行过componentWillUpdate()，即使我可以在mapStateToProps返回之前看到通过日志记录来更新状态。状态是100%改变的，但是组件不刷新。
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { search } from './mapActions'
import L from 'leaflet'
class Map extends Compone
浏览 3提问于2016-03-10得票数 27
我正在页面上显示来自API的数据。实际上，我试图以相反的顺序显示数组数据，但它没有反向显示数据。当我刷新页面时，第一次数据是反向显示的，但3秒后数据被恢复并以原始形式显示。请帮我谢谢
码
import React, { Component } from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
import "./style.css";
import axios from "axio
浏览 0提问于2019-08-20得票数 4
回答已采纳
1回答
所以我的代码是这样的，其中我有两个相同的状态state1和state2。单击"change“按钮将设置state1的状态，但实际上，通过单击"Show”按钮显示，这两种状态的值都发生了变化。是什么引起了这个问题？
import React, { useEffect, useState } from "react";
interface Obj {
num: number
}
const App = () => {
const [state1, setState1] = useState<Array<Obj> | null&g
浏览 6提问于2022-08-16得票数 3
1回答
在我的React/Redux应用程序中，我有一个组件需要从服务器获取一些东西，所以我编写了一个简单的axios调用作为redux thunk操作。
但是，该操作本身并不发送任何内容；获取的信息仅在组件中使用。所以它实际上不需要是一个redux操作。对吗？
有可能是我在熟悉React后这么快就开始学习Redux了，以至于我不知道除了Redux操作之外，你还应该把异步函数放在哪里。
我只是在组件的实例方法中调用axios吗？这方面的最佳实践是什么？
浏览 8提问于2020-02-08得票数 0
4回答
我希望使用按钮(增量和递减)在状态对象中更改属性amount。我使用console.log进行了检查，当单击按钮时，属性的值正在更改，但显示的数字没有变化。为什么会这样呢？我做错什么了？
这是我的代码：()
import React, { useState, useEffect } from "react";
import { Button } from "react-bootstrap";
export default function App() {
const [data, setData] = useState({});
useEffect(
浏览 20提问于2022-11-07得票数 0
下面是我的content.jsx
var React = require('react');
var Reflux = require('reflux');
var ApplyInfo = require('./applyInfo');
var Actions = require('../actions/actions');
var DataStore = require('../stores/data-store');
module.exports = React.createClass({
mixi
浏览 2提问于2016-01-26得票数 2
回答已采纳
我理解这可能是基本的，因为我是新的反应，但我试图只是简单地记录输入的价值，无论何时它被更改或提交。
以下是代码：
import React from "react";
const App = () => {
const onNameChange = (nameInput) => {
console.log("name change Fn", nameInput);
};
return (
<>
<form onSubmit={onNameChange(this.value)}>
浏览 4提问于2020-11-09得票数 0
回答已采纳
我试图在render方法中进行状态更改，但它显示：
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
class Test extends Component {
state = {
name:[],
}
render() {
this.setState({name:this.props.data})
return(
浏览 0提问于2020-04-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
