从非 react.component class 修改状态

Question

在我的文件中，我有一个扩展 React.Component 的 Main class。 class 在文件末尾导出。它有一些状态，其中之一是列表 (Object[])。在该文件中还有另一个具有其他功能的 class（我们称之为 Foo）。我在 Main 中创建了对 Foo 的引用，然后使用它在 Foo 中调用 bar()。在 bar 中，我有一个 for 循环，它应该将 5 TestComponents 添加到上面提到的列表中。因为它是一个状态，所以我也有 Foo 扩展 React.Component。问题是，即使这允许我使用 setState()，该组件也从未安装，因此当您修改状态时，您会得到：

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Foo component.

如果我从 Foo 中删除 extends React.Component 那么当然，我无法更改状态，因为我无法使用 setState。这是我的主要代码的一个非常简化的版本：

interface State {
    list: Object[];
}

class Main extends React.Component<{}, State> {
    foo = new Foo();

    state = {
      list: [],
    }

  componentDidMount() {
    console.log(this.state.list); //logs: []

    this.foo.bar();

    console.log(this.state.list); //logs: [] expected: [TestComponent....]

  }

  render() {
    return (
      <IonContent>
          <IonList>
              {
                  //this.list.map(...);
              }
          </IonList>
      </IonContent>
    );
  };
};

class Foo extends React.Component<{}, State> {
    state = {
        list: [],
    } 
    
  constructor(props) {
    super(props);
   }

   componentDidMount() {
     console.log("mounted"); //doesnt log this since component doesnt get mounted
   }
   
  bar() {
    for(let i = 0; i < 5; i++) {
      let a = <TestComponent key={i}></TestComponent>
      
      this.setState({
        list: [...this.state.list, a], //errors here saying component not mounted
      });

    }
  }
}
export default Main;

我如何从 Foo 中修改 list 状态，因为 Foo 从未作为组件安装（'mounted' 从未被记录）？我试着看看渲染函数是否会挂载它，但我认为它不会。

render() {
      return(
          <></>
      );
  }

Answer 1

我使用全局变量让它工作（这应该一次解决两个问题。我需要在单个脚本中以及在每个脚本中的数组 'global'

我通过创建一个 globals.tsx 文件来做到这一点。在我添加的文件中：

export var bluetoothDevices: Object[] = [];

然后要访问它，您可以执行以下操作：

import { bluetoothDevices }  from '/globals/globals'

bluetoothDevices.push(x);

这就像将任何内容推入数组一样简单。我可以确认这在文件中有效（我可以修改并从每个 class 中读取它）尽管我无法确认它是否适用于所有脚本，因为我目前只有 1 页。

从非 react.component class 修改状态

Modify states from a non react.component class

reactjs

ionic-framework

react-component