Question

我目前正在开发类似智能家居的应用，并且是初学者，并且我正在使用mobX设置活动房间名称。

我在“仪表盘”组件中将它们设置为容器的标题。然后，我想使用存储在其中的变量来过滤另一个称为“房间”的组件中的房间。如果我对房间名称进行硬编码，则可以使用它，但是当我用实际变量替换房间名称时，会引发很多错误。

我已经尝试在componentWillUnmount()中声明内容，但到目前为止还没有成功。

这是我设置变量的地方

handleClick(e){

        this.props.roomStore.room = e.target.closest('.btn__toggle').querySelector('.btn__headline').innerHTML;
      }

这是我想要的房间

loadRooms(){
  if(this.state.isLoaded){
    var locations = this.state.things.filter( function (e){
      return e.location == this.props.roomStore.room}); //<- this is the relevant variable
          const habitems = locations.map((i, key) => 
          <div className="btn__toggle" key={i.UID} type="submit">
          <div className="btn__headline">{i.label}</div>
          </div>
              )
              return habitems;
            }         
}

这是我渲染我的物品的地方：

render() {

        if(this.state.isLoaded){
          return (
            <div>
          <h1 id="h1">{this.props.roomStore.room}</h1>
          <div className="btn__wrapper">{this.loadRooms()}</div>
          </div>
          );
        }

我认为它可能不起作用，因为在实际打开正确的变量之前，已在另一个组件中设置了该变量，该变量在render中使用它，因此整个组件在安装之前就已渲染。

但是我可能是错的。任何帮助将非常感激。发生的错误是：

index.module.js：860未捕获的TypeError：无法读取未定义的属性'props'

上述错误发生在组件中

未捕获（承诺）TypeError：无法读取未定义的属性“ props”

react-dom.development.js：506警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

Answer 1

您遇到的问题是您的过滤器功能无法访问this，从而导致错误Cannot read property 'props' of undefined。您可以事先使用destructuring assignment从道具中过滤掉roomStore，然后使用它代替访问this.props。

loadRooms() {
    const { roomStore } = this.props;
    if (this.state.isLoaded) {
        var locations = this.state.things.filter( function (e){
            return e.location == roomStore.room
        });

        /* ... */
    }
}

解构分配语法是一种JavaScript表达式，可以将数组中的值或对象中的属性解压缩为不同的变量。

无法在已卸载的组件上执行反应状态更新。这是禁忌-与Mob X相关

1 个答案: