網(wǎng)站首頁 編程語言 正文
使用useState修改對象或者數(shù)組的值無法改變視圖
在react中使用useState無法改變視圖,數(shù)據(jù)改變但是視圖未改變
未渲染的代碼如下:
const [needLists,setNeedLists]=useState([])
const pressDownEnter=(e)=>{
? ? if(e.keyCode===13){
? ? ? needLists.push({
? ? ? ? content:e.target.value,
? ? ? ? status:0
? ? ? })
? ? ? setNeedLists(needLists)
? ? ? e.target.value=""
? ? }
? }
未發(fā)生改變的原因可能是因為needLists本身并沒有變化,因為needLists變量存儲的地址是不變的
解決辦法
通過數(shù)據(jù)結構讓傳入的新值和原來的數(shù)組指向的不是同一片內(nèi)存,就能觸發(fā)dom的更新
const [needLists,setNeedLists]=useState([])
const pressDownEnter=(e)=>{
? ? if(e.keyCode===13){
? ? ? needLists.push({
? ? ? ? content:e.target.value,
? ? ? ? status:0
? ? ? })
? ? ? setNeedLists([...needLists])
? ? ? e.target.value=""
? ? }
? }
對于對象的修改也是同理可以通過{…obj}
關于useState使用及注意事項
一、基本使用
useState是 react 提供的一個定義響應式變量的 hook 函數(shù),基本語法如下:
const [count, setCount] = useState(initialCount)
它返回一個狀態(tài)和一個修改狀態(tài)的方法,狀態(tài)需要通過這個方法來進行修改;initialCount 是我們傳入的一個初始狀態(tài),它是惰性的,我們可以通過傳一個函數(shù)來返回一個值當作初始狀態(tài),并且這個函數(shù)只會在初始渲染時執(zhí)行一次;
const [count, setCount] = useState(() => {
const initialCount = someExpensiveComputation();
return initialCount
})
接下來把定義好的狀態(tài)運用到頁面:
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
const handleClick = () => {
setCount(count + 1)
// 傳入一個函數(shù),更新的值是基于之前的值來執(zhí)行
// setCount(count => count + 1)
}
return (
<div>
<h4>count: {count}</h4>
<button onClick={ handleClick }>點擊更新狀態(tài)</button>
</div>
)
}
頁面渲染完成后,我們可以看到 count的值是 0,當我們點擊按鈕時,會將 count的值加 1,頁面也同時更新;
了解完基礎用法后,我們可以思考幾個問題;
- setCount修改值時它是同步還是異步?
- 連續(xù)調(diào)用 setCount會發(fā)生什么?
第一個問題:setCount修改值時它是同步還是異步?
const handleClick = () => {
console.log("value1: ", count)
setCount(count => count + 1)
console.log("value2: ", count)
}
從圖中我們可以看出,頁面的值是更新了,但是控制臺打印的是之前的值,這是不是也表示 setCount是異步的呢?我們換一種方法,用異步來修改狀態(tài);
const handleClick = () => {
console.log("value1: ", count)
setTimeout(() => {
setCount(count => count + 1)
console.log("value2: ", count)
}, 0)
}
顯然,異步修改狀態(tài)跟同步修改狀態(tài)的結果是一致的,這也表明了 setCount 是異步更新的;那我們要怎么拿到更新后的值呢,我們可以用另外一個 hook 函數(shù) useRef,代碼如下:
function App() {
const [count, setCount] = useState(0)
const countRef = useRef(count)
countRef.current = count
const handleClick = () => {
setCount(count => count + 1)
console.log("value3: ", count)
setTimeout(() => {
console.log(countRef.current)
}, 0)
}
return (
<div>
<h4>count: {count}</h4>
<button onClick={handleClick}>點擊更新狀態(tài)</button>
</div>
)
}
從圖中我們可以看出,我們已經(jīng)拿到了更新之后的值,useRef不僅可以用于訪問 DOM 節(jié)點,也可以用來表示一個容器,current屬性可以保存任何值,而且useRef返回的對象會在整個生命周期內(nèi)保持;
第二個問題:連續(xù)調(diào)用 setCount會發(fā)生什么?
(1)傳入一個基于狀態(tài)的值
const handleClick = () => {
console.log("value1: ", count)
setCount(count + 1)
console.log("value2: ", count)
setCount(count + 1)
console.log("value3: ", count)
}
從圖片可以看出,如果我們傳入的是一個普通值,他只會進行最后一次更新;
(2)傳入一個函數(shù)
const handleClick = () => {
console.log("value1: ", count)
setCount(count => count + 1)
console.log("value2: ", count)
setCount(count => count + 1)
console.log("value3: ", count)
}
可以看出,傳入一個函數(shù)的話,它會進行兩次賦值,因為它更新的值是基于之前的值來執(zhí)行,所以在開發(fā)中推薦使用函數(shù)傳入的形式進行修改;
二、注意事項
1、復雜變量的修改
對于復雜類型的變量我們修改時需要重新定義,在原來數(shù)據(jù)的基礎上修改不會引起組件的重新渲染,因為 React 組件的更新機制只進行淺對比,也就是更新某個復雜類型數(shù)據(jù)時只要它的引用地址沒變,就不會重新渲染組件;舉個例子
function App() {
const [arr, setArr] = useState([1])
const pushData = () => {
arr.push(4)
setArr(arr)
}
return (
<div>
<h4>{arr.join("-")}</h4>
<button onClick={pushData}>點擊添加數(shù)組</button>
</div>
)
}
上面的代碼在點擊按鈕時,視圖不會發(fā)生變化,但是 arr的值是變化了,如果想修改這個數(shù)組,需要重新定義一個數(shù)組來修改,在原數(shù)組上的修改不會引起組件的重新渲染,React 組件的更新機制對只進行淺對比,也就是更新某個復雜類型數(shù)據(jù)時只要它的引用地址沒變,就不會重新渲染組件;
const pushData = () => {
setArr([...arr, 4])
}
2、異步操作獲取更新的值
在類組件里面,修改值時異步操作可以拿到更新后的值,但是在函數(shù)組件,異步獲取是拿不到更新后的值的,舉個例子對比一下:
類組件
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
}
handleClick = () => {
this.setState({
count: this.state.count + 1
})
console.log(this.state.count)
setTimeout(() => {
console.log(this.state.count)
})
}
render() {
return (
<>
<h4>count: {this.state.count}</h4>
<button onClick={this.handleClick}>點擊更新狀態(tài)</button>
</>
);
}
}
函數(shù)組件
function App() {
const [count, setCount] = useState(0)
const handleClick = () => {
setCount(count => count + 1)
console.log("value1: ", count)
setTimeout(() => {
console.log("value2: ", count)
})
}
return (
<div>
<h4>count: {count}</h4>
<button onClick={handleClick}>點擊更新狀態(tài)</button>
</div>
)
}
顯然,在函數(shù)組件中是不能通過異步來獲取更新的值,我們可以通過 useRef來獲??;
const countRef = useRef(count)
countRef.current = count
const handleClick = () => {
setCount(count => count + 1)
console.log("value1: ", countRef.current)
setTimeout(() => {
console.log("value2: ", countRef.current)
})
}
原文鏈接:https://blog.csdn.net/coucouxie/article/details/119148545
相關推薦
- 2023-02-09 go?slice?擴容實現(xiàn)原理源碼解析_Golang
- 2022-12-21 Python實現(xiàn)簡易計算器的示例代碼_python
- 2022-12-10 C++實現(xiàn)線程同步的四種方式總結_C 語言
- 2021-11-30 關于android?studio通過命令行運行gradle編譯命令的問題_Android
- 2022-10-06 C++中的struct和class的區(qū)別詳解_C 語言
- 2022-09-30 詳解OpenCV執(zhí)行連通分量標記的方法和分析_python
- 2022-12-26 Python中獲取圖片的大小問題_python
- 2022-08-14 Python全局變量關鍵字global的簡單使用_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學習環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結構-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支