未捕获的类型错误：无法定义属性“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'))) {

  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 中获取信息，当 props 改变时你需要重新获取它。

这可能会让我们想到#4：

1. 让父级向组件提供一个函数来让组件更新lang。当它这样做时，它将获得新的lang更新道具并重新渲染。