首頁(yè) 猿問未捕獲的類型錯(cuò)誤：無法定義屬性&l...

未捕獲的類型錯(cuò)誤：無法定義屬性“x”：對(duì)象不可擴(kuò)展

JavaScript

qq_笑_17 2023-08-05 21:02:56

我正在嘗試恢復(fù)一個(gè)ReactJS 16.4用webpack 3. 至于現(xiàn)在，我已經(jīng)將所有庫(kù)升級(jí)ReactJS到v17和.webpackv5所以，我收到這個(gè)錯(cuò)誤：Uncaught TypeError: can't define property "lang": Object is not extensible代碼是：class LandingPage extends React.Component { render() { const { i18n } = this.props; if ((typeof this.props.match.params.lng !== 'undefined') && ((this.props.match.params.lng == 'en') || (this.props.match.params.lng == 'lt'))) { this.props.lang = this.props.match.params.lng.toString(); } else { this.props.lang = 'lt'; } if (this.props.lang !== i18n.language) { i18n.changeLanguage(this.props.lang, (err) => { if (err) return console.log('something went wrong loading', err) }); } return ( <div> <Preloader /> <Header /> <SectionMain /> <Footer /> </div> ) }}從那時(shí)起，似乎有些事情發(fā)生了變化。如何修復(fù)它？

查看完整描述

1 回答

拉莫斯之舞

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊

該代碼從來都不正確，因?yàn)樗鼘懭雙rops：

if ((typeof this.props.match.params.lng !== 'undefined') && ((this.props.match.params.lng == 'en') || (this.props.match.params.lng == 'lt'))) {

this.props.lang = this.props.match.params.lng.toString();

}

else {

this.props.lang = 'lt';

}

您的組件只能從 props 對(duì)象中讀取props，而不能寫入它。變化在于 React 通過使對(duì)象不可擴(kuò)展來強(qiáng)制執(zhí)行這一點(diǎn)。

如何修復(fù)它取決于您何時(shí)需要該信息以及您需要如何處理它（顯示的代碼中似乎沒有使用 this.props.lang任何內(nèi)容）：

如果它只是的局部變量render，則將其設(shè)為局部變量。
如果它影響您渲染組件的方式，請(qǐng)將其存儲(chǔ)為狀態(tài)（并且不要更改中的狀態(tài)render，在創(chuàng)建或安裝時(shí)執(zhí)行一次）。
this如果它是不影響渲染的實(shí)例特定信息，請(qǐng)將其存儲(chǔ)在（組件實(shí)例）的屬性中。

回復(fù) #2 和 #3：請(qǐng)記住，在組件實(shí)例的生命周期內(nèi)props可能會(huì)發(fā)生變化。Props 的狀態(tài)實(shí)際上是由父級(jí)而不是組件進(jìn)行管理的。所以如果你從 props 中獲取信息，當(dāng) props 改變時(shí)你需要重新獲取它。

這可能會(huì)讓我們想到#4：