将原生setState与对象进行反应
原生setState是指在React中使用this.setState()方法来更新组件的状态。它接受一个对象作为参数，该对象包含要更新的状态属性及其对应的新值。
使用原生setState与对象进行反应的主要目的是在组件中更新状态，以便重新渲染组件并反映出新的状态。这种方式可以通过在组件的生命周期方法中调用setState来实现，例如在componentDidMount、componentDidUpdate等方法中。
优势：
- 简单易用：原生setState方法是React提供的内置方法，使用起来非常简单，无需额外的库或插件。
- 自动化更新：当调用setState更新状态时，React会自动重新渲染组件，并将新的状态应用到组件中，从而实现UI的更新。
- 状态合并：原生setState方法会自动合并新的状态与旧的状态，只更新指定的属性，而不会影响其他属性的值。
应用场景：
- 表单输入：当用户在表单中输入内容时，可以使用原生setState方法来更新组件的状态，实时反映用户的输入。
- 条件渲染：根据不同的条件，动态改变组件的状态，从而实现不同的UI展示。
- 异步操作：在异步操作完成后，使用原生setState方法更新组件的状态，以便重新渲染组件并显示最新的数据。
推荐的腾讯云相关产品： 腾讯云提供了一系列与云计算相关的产品和服务，以下是其中几个与React开发相关的产品：
- 云服务器（CVM）：提供可扩展的虚拟服务器，用于部署和运行React应用程序。链接：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，用于存储React应用程序的数据。链接：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：提供安全、可靠的对象存储服务，用于存储React应用程序中的静态资源，如图片、视频等。链接：https://cloud.tencent.com/product/cos
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。
相关·内容
在反应中，我尝试了两种方法：
然后更改状态this.setState(this.state)
克隆状态，更改状态克隆，然后是this.setState(stateClone)
它们都起作用，产生同样的结果。为什么建议(在文档中)设置为状态克隆(使用Object.assign)而不是设置为状态本身？状态的对象标识是否在反应中起作用(没有Redux)？似乎只要您调用setState，不管状态对象标识如何，呈现()都会被触发。
浏览 0提问于2018-06-04得票数 2
回答已采纳
我这里有一个非常简单的反应本地样本。我是非常新的反应原住民(也是反应)。
我有一个变量text1的状态。
它用“日志数据”按钮记录到控制台。
它被设置为当前的时间字符串与按钮“更改数据”。
如果输入完成，它就会得到数据。
text1的内容显示在文本元素中。
import React from 'react';
import { StyleSheet, Text, View, Button, Alert,TextInput} from 'react-native';
export default class App extends React.Componen
浏览 0提问于2019-05-16得票数 0
回答已采纳
对不起，我没有找到任何解决办法。也许这完全是个错误的方法。
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import Home from './app/screens/Home';
import Loading from './app/screens/Loading';
import Login from './app/screens/Login';
import Register fr
浏览 2提问于2017-12-12得票数 0
1回答
我对redux的反应很陌生，而且在理解redux with React方面仍然很难理解。
例如，下面是一些代码：
const mapStateToProps = (storeData) => ({
editing: storeData.isEditMode;
})
const mapDispatchToProps = {
saveCallback: xxx
}
const connectFunction = connect(mapStateToProps, mapDispatchToProps);
export const
浏览 2提问于2019-11-20得票数 0
回答已采纳
我能够在我的简单的React应用程序中实现一个事件处理程序，我想更深入地理解event.target.value。我有一个猜测，但我想问别人，这样我就可以确认或修改任何错误的理解。
所以..。我们如何能够在反应中使用event.target.value？事件是否属于？还是更多的是反应？
这是我的代码供参考
import React from 'react';
import Display from './Display';
export default class Search extends React.Component{
constructor(pr
浏览 8提问于2021-04-09得票数 6
回答已采纳
这个问题只是为了改善我的代码的反应，目前看来非常肮脏和不可读。我有10-15个表单字段，一旦我从API中得到值，它就会更新。
这是我做这件事的代码
this.setState({smtpServer:res.data.data[0].smtpServer});
this.setState({senderName:res.data.data[0].senderName});
this.setState({senderEmail:res.data.data[0].senderEmail});
this.
浏览 6提问于2020-05-28得票数 0
回答已采纳
我是非常新的反应本地编程。我正在尝试在ListView中实现一个刷新功能的拉式。因此，我决定使用组件。我已经根据文档实现了变量状态和函数，但是_onRefresh()函数从未被调用。因此，进度条也没有出现在顶部。
我的源代码：
// @flow
'use strict';
import React, {Component} from "react";
import {
StyleSheet,
View,
Image,
Text,
ListView,
TouchableHighlight,
RefreshControl,
} fr
浏览 1提问于2017-06-23得票数 1
3回答
我正在写康维的“反应中的生命游戏”的版本。组件的状态包含描述当前哪个单元格处于活动状态的grid。在每个游戏循环中，计算新的grid，并使用下一次迭代更新状态。
我突然意识到，由于setState是异步的，所以当重复使用setInterval调用iterate函数时，不能保证每次iterate运行时都使用当前版本的grid。
除了在反应中使用setInterval之外，还有其他方法可以避免由于setState是异步的而引起的任何潜在问题吗？
下面是描述游戏循环的相关功能：
go = () => {
const { tickInterval } = this.state;
浏览 1提问于2018-11-19得票数 4
回答已采纳
2回答
理解React ()钩子
、、、
我正在使用useState()钩子开发一个功能反应组件。我对这个钩子的使用方式或者它背后的设计决策感到有点困惑。
我举了一个例子来说明我的问题：
基于类的构件
在基于类的组件中，this.setState({foo: 'bar'})只使用传递给第一个参数的对象中的键更新状态。如果状态已经包含了不同的值，那么这些值就会被保留下来。
功能组件
我误以为useState()提供的useState()语法和行为与Component提供的语法和行为非常相似。但是，我注意到setState({foo: 'bar'})将替换整个状态，删除未传递的键。
这个问题可以通过在每次
浏览 2提问于2019-07-15得票数 0
回答已采纳
2回答
我是新来的反应本地人。我正在尝试收集一个webservice并输入一些元素，这些元素来自于对Picker的响应(我使用的是本机基础)。我的问题是，我不知道如何获得一个元素(这里是LIBELLE)，我在Json中需要什么。
见守则：
getSurfaces(){
fetch('yourWebservice')
.then((response) => response.text())
.then((responseText) => {
parseString(responseText, function (
浏览 4提问于2017-11-30得票数 2
回答已采纳
2回答
我正在学习react，我正在遵循，在主题中我找到了Calculator组件
class Calculator extends React.Component {
constructor(props) {
super(props);
...
this.state = {scale: 'c', temperature: ''}
}
handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperatur
浏览 0提问于2018-01-17得票数 5
回答已采纳
我正在开发一个应用程序，在那里我使用流星并作出反应。
我的反应组件之一看起来如下：
MyModal = React.createClass({
openModal() {
this.setState({active: true});
},
closeModal() {
this.setState({active: false});
},
getInitialState() {
return {
active: this.props.isVisible
}
},
浏览 0提问于2015-08-17得票数 0
回答已采纳
我对JS很陌生，对此我也有反应。查看了为setState()提供的文档，并找到了这个
为了更好地感知性能，React可能会延迟它，然后一次更新几个组件。React不能保证立即应用状态更改。
setState()并不总是立即更新组件。它可以对更新进行批次或将更新推迟到以后。
它究竟如何决定哪些组件要立即更新，哪些要推迟？
更确切地说，我有一些类似于下面给出的.在外部设置一个公共setState()，根据具体情况设置另一个公共，这是个坏主意吗？做下面给出的第二个选项会更好的性能吗，即使这意味着代码的重复？
// First
this.setState({msg: 'Hello!&
浏览 7提问于2020-03-13得票数 1
回答已采纳
4回答
嗨，我试着从一个字符串中插入我的按钮状态(setState)，给你按钮的键(僵尸)；
var stateButton = "button1-0"
实际状态：
我现在不知道写在如何反应状态下的"state.botonesstateButton: true“语法
浏览 6提问于2020-05-20得票数 0
回答已采纳
1回答
我将在序言中说，我是一个UX设计师，这是一个新的反应。
我正在使用世博/反应-本机和使用“位置”功能，以获得设备的位置信息。我能够在JSON对象中获取信息，方法是：
const { height, width } = Dimensions.get("window");
class Explore extends Component {
static navigationOptions = {
header: null
};
state = {
locationResult: ""
};
componentDidMount() {
this._getLoca
浏览 2提问于2019-05-05得票数 0
回答已采纳
在下面的代码中，我无法理解event.target.value是如何工作的。我浏览了文档，但不幸的是我无法理解这一点。有没有人能用更简单的术语解释一下？
import React, { Component } from 'react';
import './NewPost.css';
class NewPost extends Component {
state = {
title: '',
content: '',
author: 'Max'
浏览 0提问于2020-11-03得票数 0
我试图将我的反应状态组织成由数组组成的对象文本。
const [state, setState] = React.useState({ filter: [], other: [] });
每当单击列表项时，我希望更新筛选器数组。
const handleListItemClick = (event, index) => {
if (state['filter'].includes(index)) {
setState(state['filter'].filter(function (element) {
浏览 2提问于2021-07-05得票数 0
回答已采纳
只是对反应的生命周期有点困惑。我的理解是..。
render()总是先运行，对吗？如果是这样..。
这意味着setState()在useEffect()中只在初始render()之后运行，对吗？
问题：
当发生上述情况时，整个组件是否重新呈现？
因此，这将是组件第二次呈现只是为了加载state。
这不是表演的问题吗？
浏览 2提问于2020-04-11得票数 3
回答已采纳
我正在尝试更新一个数组的索引内的反应状态。问题是我不能使用setState()方法访问数组的索引。
我的代码如下所示：
handleLike(post) {
axios.get(`/likes/${post}`)
.then(response => {
this.state.posts.forEach((entry, index) => {
if (entry.id === post) {
this.setState({po
浏览 2提问于2019-04-27得票数 1
回答已采纳
2回答
我在我的反应本机应用程序中有一个CheckBox。按压时，它可以激活。然而，当再次按下，它不会取消检查本身。我做错了什么？
export default class MyClass extends Component {
constructor(props) {
super(props);
this.state = {
checked: false
};
};
render() {
return (
<View>
浏览 1提问于2020-04-11得票数 0
回答已采纳
我试图在Axios的反应中加入一个捕获承诺，它可以工作，但是我得到了无限数量的请求和404错误。
class Search extends Component {
state = {
notFound: false,
dataResult: "",
};
componentDidUpdate() {
axios
.get("url")
.then((resp) => {
this.setState({ dataResult: resp.data });
})
浏览 2提问于2020-09-17得票数 0
回答已采纳
我在meteorJS中使用了反应性路由器。在创建帐户后，我尝试重定向。现在帐户已成功创建，但重定向不起作用。
当成功创建帐户时，我也会尝试添加setState。它也不起作用。
handleSubmit(event) {
event.preventDefault();
Accounts.createUser(
{
username: this.state.mobile,
password: "123"
},
浏览 1提问于2019-02-19得票数 0
回答已采纳
试图优化我的反应性应用程序…应该在可能的情况下合并setState语句，还是最好将它们分开？
setLength(10)
setLengthPercentage(10)
setMarks(["foo", "bar"])
vs
setAll({
length: 10,
lengthPercentage: 10,
marks: ["foo", "bar"],
})
哪一种是最佳实践？
浏览 2提问于2022-07-26得票数 1
回答已采纳
2回答
我在做一个反应测试应用程序。所有的一切都是完美地从一个函数中分离出来，这个函数搅乱了我的数组，所以每次答案似乎都是随机的。这是密码。
shuffleArray() {
let array = this.state.answerArray;
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return a
浏览 0提问于2020-03-04得票数 0
回答已采纳
4回答
在下面的示例中，我使用一个ES6映射作为React中的状态值：
class App extends React.Component {
constructor(props) {
super(props);
const results = new Map();
results["group1"] = [{ value: "..." }, { value: "..." }];
this.state = { results };
}
onUpdateClick(i) {
this.state.r
浏览 8提问于2020-06-19得票数 3
我刚开始反应，只是一个关于setState()方法的问题。我知道setState()可以将一个函数作为：
handleClick() {
return this.setState(previousState => {
return { count: previousState.count + 1 }
});
}
但我在教科书中也有这样的代码：
...
constructor(props) {
super(props);
this.state = {
errors: {},
dirty: {},
formSubmitted:
浏览 3提问于2019-10-31得票数 0
回答已采纳
2回答
我有棱角和Vue的经验，并开始学习反应。
为什么所有未从父组件中传递的变量都存储在状态对象中，而不是存储在类的根处？另外，为什么React需要一个特殊的方法(setState)来改变变量的值？变量值可以直接更改，但除非使用setState，否则视图不会更新。
在角度上：
this.variableName = 'new value';
在反应中：
this.setState({
variableName: 'new value'
});
浏览 1提问于2018-02-19得票数 4
回答已采纳
2回答
我不知道我正在使用的库中是否存在冲突，但出于某种原因或出于某种原因，最近的反应是，但是当我从状态更新数组时，即使我没有调用setState，它还是在变异它。对于处于我不知道的状态的数组，是否有特殊情况？
constructor(props){
super(props);
this.state = {
data: [
{ id: 1, name: 'hello' },
{ id: 2, name: 'world' },
{ id: 3, name: 'once' }
浏览 0提问于2019-05-15得票数 2
回答已采纳
2回答
我有一个待办事项清单在这里使用反应和火力基地。我可以成功地从防火墙中删除一个项目，并添加一个。问题是在项目被移除后对重新呈现做出反应。我在玩它，我意识到我做错了什么，但不知道如何解决我的问题。
下面是我的componentDidMount方法，我将状态设置为等于数据库发送的数据。
componentDidMount() {
this.todosRef.on('child_added', snapshot => {
const todo = { key: snapshot.key, value: snapshot.val() }
this.setStat
浏览 0提问于2018-07-05得票数 2
回答已采纳
我正在读的官方反应教程
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({
data: data
});
}.bind(this),
err
浏览 1提问于2015-10-18得票数 0
回答已采纳
我积极地使用eslint-plugin-react，最近读到了关于的文章。我想用eslint规则来解决这个问题，但是找不到。是否有强制使用功能性setState的静默反应规则？
浏览 2提问于2017-03-22得票数 2
回答已采纳
出于好奇，我只想知道如果我在一个类的构造函数中使用setState()函数，在ReactJS中会发生什么？例如：
constructor(props) {
super(props);
this.setState({title: 'new title'});
}
反应的生命周期会发生什么？
我还没看过反应里面的代码。如果我这样写的话，恐怕会有什么损害。
浏览 7提问于2016-01-23得票数 82
回答已采纳
我是新的反应，并正在学习如何setState的工作。因此，您可以看到下面的代码：
class Counter extends React.Component {
constructor(props) {
super(props);
this.handleReset = this.handleReset.bind(this);
this.state = {
count: 5
};
}
handleReset() {
this.setState({count:0})
this.setState({count:this.state.c
浏览 1提问于2019-08-30得票数 1
回答已采纳
我试图通过将回调函数传递给setstate来强制同步执行setstate。
我已经做了我的研究，发现我们可以做一些事情
this.setstate({state:value}, () => {function()})
但是，由于ES5没有箭头函数，我应该如何在setstate中传递回调？
我试过this.setstate({state:value}, function())，但它没有做我想做的事情。
此外，是否有更理想的方式迫使反应来同步执行setstate？
浏览 2提问于2017-11-14得票数 0
回答已采纳
2回答
用不变的方式更新反应状态
、、、
我正试图通过不变的方式更新我的常规反应状态，并出现了一些问题。状态不是深嵌套的，也不是从状态本身以外的任何东西嵌套的，比如{ "username" : "keyval" : null}}
这意味着我不能做像username.update('keyval', something)这样的事情，而是需要另一种方法。这是个很简单的问题，我只是不知道怎么做。下面是我的setState的样子，我想做一个不变的setState操作。
handleUpdatePassword(event) {
event.persist()
this.setSt
浏览 3提问于2016-07-08得票数 2
回答已采纳
1回答
我希望能够使用计算值的子键时，更新状态在反应。
我理解如何在以下简单的设置中使用计算值：
this.setState({ [name]: value });
但是，在这样的情况下，我很难获得键值计算结果：
constructor(props) {
super(props);
this.state = {
foo: { a: 1, b: 2 }
};
}
const keyToChange = 'a';
const value = 3;
this.setState({ foo[keyToChange]: value });
我怎样才能
浏览 0提问于2018-09-07得票数 2
回答已采纳
1回答
反应滤波器库
、、
这是我的第一个小反应应用。我以前在Vue.js方面有过一点经验，但我也不想学习react.js的基础和最佳实践。因此，这是一个小型的库应用程序(包含带有标题、desc、主题的链接提示)，它显示了所有的库项目，可以通过单击特定的关键字过滤它们。很容易，但我想从你那里知道我是否编码了一些不好的做法或反模式或某些东西。就像这样。
main.js
import React from 'react'
import ReactDOM from 'react-dom'
import Library from './components/Library.jsx'
浏览 0提问于2018-01-04得票数 2
回答已采纳
假设我有一个反应性组件(functional )，并且正在传递多个道具。其中一个道具是一个嵌套的对象，比如.
示例嵌套对象
const user = {
id: 101,
email: 'jack@dev.com',
personalInfo: {
name: 'Jack',
address: {
line1: 'westwish st',
line2: 'washmasher',
city: '
浏览 2提问于2021-12-04得票数 0
回答已采纳
，我有一个反应本地应用程序，可以工作，但我希望能够为网络构建。任何帮助都将不胜感激。下面是我的package.json。
{“名称”："dotmac"，
“版本”："0.0.1"，
“私人”：没错，
“剧本”：{
"android"：“反应-原生运行-android”，
"ios"：“反应性-本机运行-ios”，
“开始”：“反应--本土化的开始”，
“测试”：“玩笑”，
"lint"："eslint .-ext .js，.jsx，.ts，.tsx“
},
“依赖关系”：{
“@fortawesome/fo
浏览 3提问于2022-09-05得票数 0
组件中有以下代码：
constructor() {
this.state = Immutable.fromJS({
user : {
wasChanged : false,
firstName : false,
lastName : false,
address : {
street : false,
}
}
});
}
on
浏览 3提问于2015-07-18得票数 4
回答已采纳
我正在从事一个反应性js项目。我有一个状态变量，并在x_state方法中使用另一个普通变量(x)初始化该状态变量( componentDidMount() )。但是，每当我的普通变量(x)被更新时，它就会自动更新状态变量(x_state)。
export class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
x_state: null
}
this.x = {}
}
componentDidMount() {
浏览 0提问于2019-03-17得票数 2
回答已采纳
1回答
我在做反应元件。函数中有一个常见的ajax调用：
getPost = (postName, storage) => {
this.setState({fetchInProgress: true})
$.ajax({
url: "/api/getitems",
type: "GET",
dataType: 'json',
ContentType: 'application/json',
data: {modelName: postNa
浏览 5提问于2017-10-07得票数 0
回答已采纳
我有一个理论问题：
这两种反应陈述之间有什么区别：
const [state, setState] = useState({
name: '',
age:0
})
setState((prevState) => ({...prevState, age: prevState.age + 1}) )
和
const [state, setState] = useState({
name: '',
age:0
})
setState({...state, age: state.age + 1})
浏览 2提问于2020-11-17得票数 1
回答已采纳
4回答
试图遵循一个简单的时钟/倒计时教程的反应：
constructor(props) {
super(props);
this.state = {
secondsRemaining: 10
};
}
componentDidMount(){
let interval = setInterval(this.timer, 1000);
this.setState({ secondsRemaining: this.state.secondsRemaining })
this.setState({ interval: interval
浏览 10提问于2016-11-23得票数 0
回答已采纳
我有以下反应成分。我是比较新的反应，所以没有所有的概念，使用钩子牢牢地掌握在我的掌握。
我还看到了一些其他问题，指出了setState函数的异步特性，但这里似乎不是这个问题。
期望代码：我希望当用户输入fName和lName输入值时，h1会自动更新和呈现
实际发生的事情：当我在输入中输入值时，类型化值不会显示在UI上的输入字段中。标题(h1)也不更新。
附加注释：如果我使用" if“语句检查并有条件地更新对象的相应属性，而不是在setHeadingText中使用prevStatename = value；，代码将按预期工作。
import React, {useState} fro
浏览 5提问于2021-08-09得票数 0
回答已采纳
我正在用Java编写CRUD应用程序并作出反应。我有一个UpdateRecordComponent在反应，我使用它来更新一个特定的记录。然而，每次单击按钮编辑记录时，都会出现“无法读取未定义属性(读取'params')”的错误。
守则如下：
class UpdateContractorComponent extends Component {
constructor(props) {
super(props);
this.state={contractorId:'', contractorName:'',
浏览 4提问于2021-11-19得票数 0
回答已采纳
这是我的简单反应组件。我首先在componentWillReceiveProps中将componentWillReceiveProps设置为状态，然后在submit中设置rooms，在状态中也将rooms设置为data。
在提交时，我通过从rooms传递单个对象来执行api调用，当响应出现时，我从数据(但不是从rooms)执行slice对象，直到data长度等于为止。
现在的问题是，当我从slice中执行data时，它也会对rooms元素进行slices。
class EditRoom extends Component {
constructor() {
super()
浏览 1提问于2018-11-02得票数 0
回答已采纳
我是一个反应的初学者，我正在学习REST返回的显示对象的教程。在handleChangeTitle方法中，我获得了在文本框中写入的值，并使用新的activeItem更新组件的状态：
handleChangeTitle(e){
//ogni volta che cambia qualcosa nella casella di testo, viene chiamata questa funzione
var name = e.target.name
var value = e.target.value
console.log('Name:', n
浏览 3提问于2022-08-29得票数 -1
回答已采纳
class App extends React.Component{
constructor(){
super();
this.state={
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState((e)=>{
return ({count: e.count + 1})
})
浏览 3提问于2021-01-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
