未捕獲的類型錯誤：無法定義屬性“x”：對象不可擴展

Question

我正在嘗試恢復一個用ReactJS 16.4編寫並用webpack 3打包的舊項目。 至於現在，我已經升級所有的圖書館， ReactJS到v17和webpack到v5 。

所以，我收到這個錯誤：

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>
    )
  }
}

從那時起，似乎有些事情發生了變化。 怎么修？

Answer 1

該代碼永遠不會正確，因為它寫入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';
}

你的組件只應該從 props 對象讀取props，永遠不要寫入它。 變化是 React 通過使對象不可擴展來增加強制執行。

您如何修復它取決於您何時需要該信息您需要如何處理它（顯示的代碼中似乎沒有使用this.props.lang ）：

1. 如果它只是局部render ，請將其設為局部變量。

2. 如果它影響您渲染組件的方式，請將其存儲為狀態（並且不要在render更改狀態，在創建或安裝時執行一次）。

3. 如果它是不影響渲染的特定於實例的信息，請將其存儲在this （組件實例）上的屬性中。

關於#2 和#3：請記住，在組件實例的生命周期內， props可能會發生變化。 道具由父級而不是組件有效地管理狀態。 所以如果從 props 派生信息，需要在 props 變化時重新派生。

這可能將我們帶到#4：

4. 讓父組件向組件提供一個函數，讓組件更新lang 。 當它這樣做時，它將獲得新的lang作為更新的道具並重新渲染。