未捕获的类型错误：无法定义属性“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作为更新的道具并重新渲染。