数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 ReactJS 中使用 setState 更新对象？
ReactJS 允许我们为每个组件定义一个状态对象。在状态对象中，我们可以添加不同的变量作为状态对象的属性。之后，我们可以在组件内部使用状态变量来渲染或执行组件中的其他操作。
本教程将教我们如何为组件创建状态对象并使用各种值更新它。
使用 setState 更新 ReactJS 中的对象
状态对象与 ReactJS 中的类组件一起使用。使用 setState() 方法，我们可以更新状态对象。
语法
用户可以按照以下语法使用 setState() 方法更新 ReactJS 中的对象。
this.setState({
student: {
...this.state.student,
fees: new_value,
},
});
在上面的语法中，我们将更新后的 student 对象作为 setState() 方法的参数传递。此外，我们还将扩展运算符与 student 对象一起使用。
示例
在下面的示例中，我们在类组件内部创建了状态对象。状态对象包含 number 属性，并使用 Math.random() 方法用随机数进行初始化。
每当用户单击按钮时，我们都会调用 changeNumber 函数。在 changeNumber() 函数中，使用 setState() 方法更新状态对象。我们将包含新随机数的对象作为 setState() 方法的参数传递。
import React, { Component } from "react";
// creating the class component
class App extends Component {
state = {
number: Math.random(),
};
// Method to update the object
changeNumber = () => {
this.setState({ number: Math.random() });
};
render() {
return (
<div>
<h2>
{" "}
Generating the random number and updating it using the{" "}
<i> setState() </i> method.{" "}
</h2>
<h3
style={{
border: "2px solid yellow",
borderRadius: "10px",
width: "22rem",
height: "5rem",
backgroundColor: "blue",
color: "white",
fontSize: "2rem",
}}
>
<span>{this.state.number}</span>
</h3>
<button
onClick= {this.changeNumber}
style = {{
border: "2px solid green",
borderRadius: "10px",
padding: "0.5rem 1rem",
backgroundColor: "yellow",
color: "black",
fontSize: "1rem",
}}
>
{" "}
Generate random values{" "}
</button>
</div>
);
}
}
export default App;
输出
示例
在下面的示例中，table 对象包含嵌套对象作为 student 属性的值。student 对象包含 id、name、age 和 fee 属性。
之后，每当用户按下按钮时，它都会调用 changesFees() 函数，该函数只更改 student 对象中 fee 属性的值。用户可以看到我们如何在 setState() 方法内部使用扩展运算符来保持 student 对象中的其他值不变。
import React, { Component } from "react";
// creating the class component
class App extends Component {
state = {
student: {
id: "123qwe",
name: "Shubham",
age: 22,
fees: 200000,
},
};
// Method to update the object
changeFees = () => {
this.setState({
student: {
...this.state.student,
fees: this.state.student.fees + this.state.student.fees * 0.2,
},
});
};
render() {
return (
<div>
<h2>
{" "}
Updating the fees in the student object using the setState method
<i> setState() </i> method.{" "}
</h2>
<h3
style = {{
border: "2px solid yellow",
borderRadius: "10px",
width: "22rem",
height: "5rem",
backgroundColor: "blue",
color: "white",
fontSize: "2rem",
}}
>
<span> {this.state.student.fees} </span>
</h3>
<button
onClick = {this.changeFees}
style = {{
border: "2px solid green",
borderRadius: "10px",
padding: "0.5rem 1rem",
backgroundColor: "yellow",
color: "black",
fontSize: "1rem",
}}
>
{" "}
Change the fees of student{" "}
</button>
</div>
);
}
}
export default App;
输出
使用 ReactJS 中的 Hook 更新对象的状态
setState() 方法是更新 ReactJS 中状态对象的旧方法。近年来，ReactJS 中引入了 Hook，我们可以使用它来更新 React 中的对象或变量值。
语法
用户可以按照以下语法使用 Hook 更新状态对象。
const [state, setState] = useState({
prop1: "Value1",
prop2: "value2",
prop3: "value3",
});
setState((state) => ({ ...state, prop3: value }));
在上面的语法中定义了 setState() 方法来更新状态对象。在 setState() 方法中，我们将回调函数作为参数传递。
示例
在下面的示例中，我们在 ReactJS 中使用了函数组件。我们使用 state 存储对象，使用 setState 更新状态对象。但是，用户可以为 state 和 setState 指定其他名称。
我们获取 state 对象的 prop3 属性值的用户的输入。之后，我们在 handleSubmit() 函数中更改 state 对象的 prop3 属性的值。在 setState() 中，我们获得之前的状态作为回调参数，并在回调函数中将其与扩展运算符一起使用。
import React, { useState } from "react";
const App = () => {
const [state, setState] = useState({
prop1: "Value1",
prop2: "value2",
prop3: "value3",
});
const [value, setValue] = useState("");
function handleValue(e) {
// handle the value
let new_value = e.target.value;
setValue(new_value);
}
function handleSubmit() {
// updating the state object
setState((state) => ({ ...state, prop3: value }));
}
return (
<div>
<h2>
{" "}
Using the <i> useState hooks </i> to update the objects in the state
</h2>
<h3>Enter the value to change for the prop3 of state object. </h3>
<input type = "text" value = {value} onChange = {handleValue} />
<div style = {{ color: "blue", fontSize: "1.5rem" }}>
The key value pairs of the state object are : prop1 - {state.prop1},
prop2 - {state.prop2}, prop3 - {state.prop3}
</div>
<button
onClick = {handleSubmit}
style = {{
margin: "1rem 0",
padding: "0.5rem 1rem",
backgroundColor: "lightgreen",
border: "2px dotted blue",
borderRadius: "10px",
color: "black",
fontSize: "1.3rem",
padding: "0.5rem",
}}
>
Submit
</button>
</div>
);
};
export default App;
输出
我们学习了如何使用 setState() 方法以及函数组件和类组件来更新状态对象。如今，用户可以使用函数组件，因为 Hook 提供了更好的功能来更新状态对象。
2K+ 次浏览
