我有這個示例代碼。我正在使用 useState 掛鉤來創建狀態 url。當我單擊“push”按鈕時，我正在使用 setUrls 函式更新 urls 狀態。隨著 urls 狀態的改變，react 應該重新渲染并顯示“hi”。但它沒有發生。有什么問題？
import React, { useState } from "react";
import {
Button,
Text
} from "@chakra-ui/react"
function Hi () {
const [urls, setUrls] = useState([]);
return (
<div>
<Button onClick={(e) => {
let url_list = urls;
url_list.push("hi");
setUrls(url_list);
}}
>
Push
</Button>
{urls.map(item => (
<Text>{item}</Text>
))}
</div>
)
}
uj5u.com熱心網友回復：
更改后組件未呈現的原因是因為物件的真實性質，陣列是 javascript 中的物件，比較是通過物件參考而不是物件的內容來完成的例如
const a = ['a','b','c','d','e']
// comparing a to itself is true
console.log(a === a) // This line returns true
const b = a;
console.log(a === b) // this line returns true because they both point to the same reference
// =========================NOW CONSIDER THIS EXAMPLE=========================================
const c = ['a','b','c'];
const d = ['a','b','c'];
console.log(c === d) // This will return false because they point to different object even though their content is the same
// NOW CONSIDER THIS
const e = [...c,'e'];
const h = Object.assign([],c);
h.push('e');
const f = c;
f.push('e');
console.log(e === c ) // false
console.log(f === c ) // true
console.log(f === h ) // false
為了對重新渲染做出反應，先前的狀態不能等于當前狀態，并且由于您在狀態上使用陣列，因此上面表明我們必須回傳一個新陣列并修改您的代碼，我只需更改一行代碼就可以正常作業
您的代碼已修改（僅一行）
import React, { useState } from "react";
import {
Button,
Text
} from "@chakra-ui/react"
function Hi () {
const [urls, setUrls] = useState([]);
return (
<div>
<Button onClick={(e) => {
let url_list = Object.assign([],urls); // copys urls to new array and returns new array to url_list
url_list.push("hi");
setUrls(url_list);
}}
>
Push
</Button>
{urls.map(item => (
<Text>{item}</Text>
))}
</div>
)
}
uj5u.com熱心網友回復：
當你設定狀態時，參考需要改變，所以 React 可以識別出有更新。
這里url_list只是另一個參考urls。
let url_list = urls;
url_list.push("hi");
Array.from您可以使用或簡單地擴展運算子創建一個新陣列：
let url_list = [...urls];
url_list.push("hi");
在 React 中不應該改變狀態，這意味著不應該直接更新狀態變數。在上面的第二種方法中，您正在使用.... 但請注意，如果urls是物件陣列，則內部物件參考仍將保持不變。淺拷貝與深拷貝
uj5u.com熱心網友回復：
將 urls 陣列分配給 url_list 時，您需要傳播它。
注意：這不會深度復制 url 陣列。對于深層復制，您可以使用 lodash 或任何其他允許 deepCopy/clone 的庫。
看一下實作：
export default function App() {
const [urls, setUrls] = useState([]);
return (
<div>
<button
onClick={(e) => {
setUrls([...urls, 'hi']);
}}
>
Push
</button>
{urls.map((item) => (
<div>{item}</div>
))}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410578.html
標籤：
上一篇：使用“路由”時，React-router-dom不顯示任何內容
下一篇：減速器調度推送問題