如何在未挂载的React类Foo中修改Main组件的list状态？

你的核心问题在于错误地把Foo设计成了React组件——Foo只是负责生成元素的逻辑类，不需要挂载到DOM，继承React.Component完全没必要，反而因为未挂载触发了setState警告，而且Foo自己的state和Main的state是完全独立的，所以修改Foo的state根本不会影响Main的list。

下面是两种可行的解决方案：

方案一：通过回调函数让Foo通知Main更新state #

把Foo改成普通类，在创建实例时传入一个由Main提供的回调函数，Foo生成元素后调用这个回调，让Main自己去更新state：

修改后的Foo类 #

class Foo {
  private addItem: (item: React.ReactElement) => void;

  constructor(addItemCallback: (item: React.ReactElement) => void) {
    this.addItem = addItemCallback;
  }

  bar() {
    for(let i = 0; i < 5; i++) {
      const testComp = <TestComponent key={i} />;
      this.addItem(testComp);
    }
  }
}

修改后的Main类 #

interface State { list: React.ReactElement[]; }

class Main extends React.Component<{}, State> {
  foo: Foo;
  state = { list: [] };

  constructor(props: {}) {
    super(props);
    // 传入更新Main state的回调
    this.foo = new Foo((item) => {
      // 使用函数式更新state，确保基于最新状态修改
      this.setState(prevState => ({
        list: [...prevState.list, item]
      }));
    });
  }

  componentDidMount() {
    console.log('初始list:', this.state.list); // []
    this.foo.bar();
    // setState是异步的，要查看更新后的状态需要用回调
    this.setState(() => {
      console.log('更新后的list:', this.state.list); // 包含5个TestComponent
    });
  }

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

方案二：让Foo直接返回元素数组，Main一次性更新state #

这种方式更高效，因为避免了循环中多次调用setState（每次setState都会触发组件重渲染），而是一次性合并所有新元素：

修改后的Foo类 #

class Foo {
  bar() {
    const newItems: React.ReactElement[] = [];
    for(let i = 0; i < 5; i++) {
      newItems.push(<TestComponent key={i} />);
    }
    return newItems;
  }
}

修改后的Main类 #

interface State { list: React.ReactElement[]; }

class Main extends React.Component<{}, State> {
  foo = new Foo();
  state = { list: [] };

  componentDidMount() {
    console.log('初始list:', this.state.list); // []
    const newItems = this.foo.bar();
    this.setState(prevState => ({
      list: [...prevState.list, ...newItems]
    }), () => {
      console.log('更新后的list:', this.state.list); // 包含5个TestComponent
    });
  }

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

关键总结 #

• React组件是为UI渲染和挂载生命周期设计的，纯逻辑类不要继承React.Component；
• 组件的state只能由自身通过setState修改，其他类可以通过回调、返回值等方式提供数据，再由组件自己更新状态；
• 尽量减少setState的调用次数，批量更新状态能提升组件性能。

内容的提问来源于stack exchange，提问作者DreamingInsanity