未捕获的类型错误：无法定义属性“x”：对象不可扩展

Question

我正在尝试恢复一个ReactJS 16.4用webpack 3. 至于现在，我已经将所有库升级ReactJS到v17和.webpackv5

所以，我收到这个错误：

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'))) {&nbsp; this.props.lang = this.props.match.params.lng.toString();}else {&nbsp; this.props.lang = 'lt';}您的组件只能从 props 对象中读取props，而不能写入它。变化在于 React 通过使对象不可扩展来强制执行这一点。如何修复它取决于您何时需要该信息以及您需要如何处理它（显示的代码中似乎没有使用&nbsp;this.props.lang任何内容）：如果它只是 的局部变量render，则将其设为局部变量。如果它影响您渲染组件的方式，请将其存储为状态（并且不要更改 中的状态render，在创建或安装时执行一次）。this如果它是不影响渲染的实例特定信息，请将其存储在（组件实例）的属性中。回复 #2 和 #3：请记住，在组件实例的生命周期内props可能会发生变化。Props 的状态实际上是由父级而不是组件进行管理的。所以如果你从 props 中获取信息，当 props 改变时你需要重新获取它。这可能会让我们想到#4：让父级向组件提供一个函数来让组件更新lang。当它这样做时，它将获得新的lang更新道具并重新渲染。