資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 React Hooks 中設定狀態物件內的物件鍵？
React 元件可以包含各種狀態，我們可以在 return 語句中使用狀態變數與 HTML 元素一起使用。每當狀態變數的值更新時，它也會在網頁上更新，而無需重新整理網頁。
本教程將教會我們如何在狀態變數中使用物件。無論我們想在狀態變數中儲存什麼值，例如數字、字串、布林值或物件，都需要將其作為 useState() hook 的引數傳遞。
在 React Hooks 中使用物件
本節將教會我們如何在 React Hooks 中使用物件作為值。我們將用一個包含不同屬性及其值的初始化狀態變數。之後，我們可以更新物件的屬性值，並使用 setState() 函式設定更新後的物件。
語法
使用者可以按照以下語法在 React Hooks 中使用狀態物件內的物件鍵。
const [objState, setObjState] = useState({ a: 10, b: 76676, c: "Welcome" }); setObjState({ ...objState });
在上面的語法中，我們將物件作為 useState() 方法的引數傳遞。此外，使用者還可以看到我們如何使用 setObjState() 函式來更新物件。
示例
在下面的示例中，我們使用了函式元件在 React Hooks 中設定物件。我們使用 useState() hook 在 React 中建立狀態。我們添加了三個名為 a、b 和 c 的屬性，並使用不同的值作為狀態物件。
每當使用者點選按鈕時，它都會執行 updateValues() 函式，該函式更改 objState 物件的屬性，並使用擴充套件運算子，以 objState 作為運算元，並與 setObjState() 函式一起使用。
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() hook 並建立了 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 Hooks 中使用陣列物件
在使用 React Hooks 時，我們也可以使用陣列作為狀態變數。在本節中，我們將使用物件陣列作為狀態變數的初始值。之後，我們將訪問狀態陣列的每個物件，並根據需要更新其屬性值。
語法
使用者可以按照以下語法在 React Hooks 中使用物件陣列作為狀態。
const [arrayOfObj, setArrayObjects] = useState([
{ prop1: "value1", prop2: "value2" },
]);
setArrayObjects([...arrayOfObj]);
在上面的語法中，使用者可以觀察我們如何使用 useState() hook 用物件陣列初始化狀態變數。之後，我們還使用了 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 Hooks 中將物件設定為初始值。此外，使用者還學習瞭如何使用 React Hooks 更新物件的屬性值。在最後一個示例中，使用者學習瞭如何在 React Hooks 中使用物件陣列，並更新物件陣列中每個物件的值。
8K+ 瀏覽量
