极客教程如何在React Hooks的状态对象里面设置一个对象键
React组件可以包含各种状态，我们可以用HTML元素在返回语句里面使用状态变量。每当状态变量的值更新时，它也会在网页上更新，而无需刷新网页。
本教程将教我们如何使用状态变量里面的对象。无论我们想在状态变量中存储什么值，如数字、字符串、布尔值或对象，我们都需要把它作为useState()钩子的参数来传递。
在React钩子中使用对象
本节将教我们在React钩子中使用一个对象作为值。我们将用一个包含不同属性的对象来初始化状态变量，并赋予其值。之后，我们可以更新对象的属性值，并使用setState()函数来设置更新的对象。
语法
用户可以按照下面的语法，在React钩子中的状态对象内使用对象键。
const [objState, setObjState] = useState({ a: 10, b: 76676, c: "Welcome" });
setObjState({ ...objState });
在上面的语法中，我们把对象作为useState()方法的一个参数来传递。另外，用户可以看到我们是如何使用setObjState()函数来更新对象的。
例子
在下面的例子中，我们使用了功能组件来设置React钩子中的对象。我们使用useState()钩子来创建React的状态。我们添加了三个名为a、b、c的属性，并以不同的值作为一个状态对象。
每当用户点击按钮，它就会执行updateValues()函数，改变objState对象的属性，并通过setObjState()函数将objState作为操作数，使用传播操作符。
import React, { useState } from "react";
export default function App() {
const [objState, setObjState] = useState({ a: 10, b: 76676, c: "Welcome" });
function updateVales() {
objState.a = 20;
objState.b = 30;
objState.c = "Hello";
setObjState({ ...objState });
}
return (
<div>
<h2>
{" "}
Using the <i> objects inside the state object </i> in React hooks.
</h2>
<h3> The object property and values are </h3>
<h4> a :- {objState.a} </h4>
<h4> b :- {objState.b} </h4>
<h4> c :- {objState.c} </h4>
<button onClick = { updateVales}> Update object property values </button>
</div>
);
}
输出
当你点击 “更新对象属性值 “时，它将显示例2
例子
在下面的例子中，我们使用了useState()钩子并创建了mousePos状态变量。setMousePos()函数被用来更新mousPos状态的值。
在HTML中，我们使用了onPointerMove()事件来获取鼠标指针在网页上的当前位置。每当用户移动鼠标指针时，就会触发该事件并调用setPointer()函数，从而更新mousePos对象的x和y属性值。
import React, { useState } from "react";
export default function App() {
const [mousePos, setmousePos] = useState({ x: 0, y: 0 });
function setPointer(event) {
mousePos.x = event.clientX;
mousePos.y = event.clientY;
setmousePos({ ...mousePos });
}
return (
<div onPointerMove = {setPointer} style = {{ height: "100vh", width: "100%" }}>
<h2>
{" "}
Using the <i> objects inside the state object </i> in React hooks.
</h2>
<h3> The object property and values are </h3>
<h4> x :- {mousePos.x} </h4>
<h4> y :- {mousePos.y} </h4>
</div>
);
}
输出
在React钩子中使用数组对象
在使用React钩子时，我们也可以使用数组作为状态变量。在本节中，我们将使用数组对象作为状态变量的初始值。之后，我们将访问状态数组的每个对象，并根据要求更新它们的属性值。
语法
用户可以按照下面的语法来使用对象数组作为React钩子的一个状态。
const [arrayOfObj, setArrayObjects] = useState([
{ prop1: "value1", prop2: "value2" },
]);
setArrayObjects([...arrayOfObj]);
在上面的语法中，用户可以观察到我们是如何使用useState()钩子来用一个对象数组初始化状态变量的。之后，我们还使用setArrayOfObj()函数来设置更新的数组。
例子
在下面的例子中，arrayOfObj状态变量包含四个具有不同键值对的对象作为初始值。
每当用户点击更新值按钮，就会调用updateValues()函数，改变数组中每个对象的’prop1’属性的值。之后，我们使用传播操作符来更新arrayOfObj状态变量的值。
用户可以在按下按钮后看到对象属性的更新值。
import React, { useState } from "react";
export default function App() {
const [arrayOfObj, setArrayObjects] = useState([
{ prop1: "value1", prop2: "value2" },
{ prop1: "Hello", prop2: "World!" },
{ prop1: "Your", prop2: "welcome" },
{ prop1: "Hi", prop2: "There!" },
]);
function updateValues(event) {
arrayOfObj[0].prop1 = "new_value1";
arrayOfObj[1].prop1 = "new_value2";
arrayOfObj[2].prop1 = "new_value3";
arrayOfObj[3].prop1 = "new_value4";
setArrayObjects([...arrayOfObj]);
}
return (
<div>
<h2>
{" "}
Using <i> array objects inside the state object </i> in React hooks
</h2>
<h3>The object property and values are </h3>
<h4>
{" "}
prop1 :- {arrayOfObj[0].prop1} , prop2 :- {arrayOfObj[0].prop2}{" "}
</h4>
<h4>
{" "}
prop1 :- {arrayOfObj[1].prop1} , prop2 :- {arrayOfObj[1].prop2}{" "}
</h4>
<h4>
{" "}
prop1 :- {arrayOfObj[2].prop1} , prop2 :- {arrayOfObj[2].prop2}{" "}
</h4>
<h4>
{" "}
prop1 :- {arrayOfObj[3].prop1} , prop2 :- {arrayOfObj[3].prop2}{" "}
</h4>
<button onClick = {updateValues}> Update values </button>
</div>
);
}
输出
当你点击 “更新值 “按钮时，会产生以下结果
用户学会了在React钩子中设置对象作为初始值。另外，用户还学会了用React钩子来更新对象的属性值。在最后一个例子中，用户学会了用React钩子使用对象的数组，并更新对象数组中每个对象的值。