react子組件接收的props賦值給state的陷阱問題
react子組件接收的props賦值給state的陷阱
一般情況下，子組件接收到父組件傳來的props
當做變量直接用就可以，但是個別情況下子組件需要將props賦值給state。
一開始，按照常規(guī)寫法
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
list: props.list
}
}
}會發(fā)現(xiàn)，頁面會重新渲染，但是頁面數(shù)據(jù)并沒有變化。
這涉及到要熟悉react的生命周期（圖片來自于jianshu.com/p/b331d0e4b398，深表感謝）
當父組件更新導(dǎo)致子組件更新時
子組件的生命周期執(zhí)行順序是
componentWillReceiveProps --> shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate
也就是說子組件刷新的時候，不再執(zhí)行constructor
當然也就不會對state重新賦值，所以子組件雖然執(zhí)行了render，但是渲染數(shù)據(jù)不變。
解決此問題并不難
就是在componentWillReceiveProps中重新對state賦值，即可。
componentWillReceiveProps(props) {
this.setState({
list: props.list
})
}只有類組件有此問題，函數(shù)組件沒有此問題。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于react useState更新異步問題，具有很好的參考價值，希望對大家有所幫助。以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。2022-08-08
useEffect是React中的一個鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對大家有所幫助2023-08-08
React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產(chǎn)生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關(guān)于React入門教程之Hello World以及環(huán)境搭建的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07![react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題](http://img.jbzj.com/images/xgimg/bcimg4.png)
react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題
本文主要介紹了react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題,文中通過圖文示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
React-router?v6在Class組件和非組件代碼中的正確使用
這篇文章主要介紹了React-router?v6在Class組件和非組件代碼中的正確使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用React Profiler進行性能優(yōu)化方案詳解
在現(xiàn)代前端開發(fā)中,性能優(yōu)化是一個不可忽視的重要環(huán)節(jié),在 React 生態(tài)系統(tǒng)中,React Profiler 是一個強大的工具,下面我們來看看如何使用它來提升我們的 React 應(yīng)用吧2025-03-03
基于Cloud?Studio構(gòu)建React完成點餐H5頁面(騰訊云?Cloud?Studio?實戰(zhàn)訓練營)
最近也是有機會參與到了騰訊云舉辦的騰訊云Cloud Studio實戰(zhàn)訓練營，借此了解了騰訊云Cloud?Studio產(chǎn)品,下面就來使用騰訊云Cloud?Studio做一個實戰(zhàn)案例來深入了解該產(chǎn)品的優(yōu)越性吧,感興趣的朋友跟隨小編一起看看吧2023-08-08
這篇文章主要介紹了React如何實現(xiàn)全屏監(jiān)聽Esc鍵，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React如何解決fetch跨域請求時session失效問題
這篇文章主要給大家介紹了關(guān)于React如何解決fetch跨域請求時session失效問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11