React类组件setState无法更新状态问题求助

问题背景 #

我有一个继承React.Component的类组件，它暴露了一个公共方法用于主动更新状态。我知道用props也能解决，但这个公共方法在我的场景里很实用，不想放弃。

我试过两种setContent方法的写法：

第一种写法 #

public setContent = (newDoc: IDocsEntry) => {
    console.log('Updating with', newDoc);
    this.setState(() => ({doc: newDoc}), () => console.log(this.state.doc));
};

第二种写法 #

public setContent = (newDoc: IDocsEntry) => {
    console.log('Updating with', doc);
    this.setState(() => ({newDoc: {id: doc.id, path: doc.path, title: doc.title, content: doc.content}}), () => console.log(this.state.doc));
};

问题现象 #

• 首次调用该方法设置状态时一切正常
• 关闭组件（它在模态框中），进行其他操作后再次调用该方法，状态完全不更新

控制台日志显示方法已被调用，且传入的新对象是正确的，但setState回调里打印的还是首次调用时的旧状态。

组件完整代码 #

interface Props {
  onClose: () => void
}
interface State {
  open: boolean,
  isEditor: boolean,
  doc: IDocsEntry
}
class ModalDocsFile extends React.Component<Props, State> {
  docPreEditing: IDocEntry | null = null;

  constructor(props: Props) {
    super(props);
    this.state = {
      open: false,
      isEditor: false,
      doc: {
        id: -1,
        path: '',
        title: '',
        content: ''
      }
    };
  }

  public show = () => {
    this.setState(() => ({open: true}));
  };

  public setEditor = (edit: boolean, skipSave?: boolean) => {
    this.setState(() => ({isEditor: edit}));
    if (edit) this.docPreEditing = this.state.doc;
    if (edit === false && !skipSave) this.save(); // editor is closed -> save
    if (edit === false && skipSave) this.setState(state => ({doc: this.docPreEditing || state.doc})); // editor is closed without saving -> restore
  };

  public setContent = (newDoc: IDocsEntry) => {
    console.log('Updating with', newDoc);
    this.setState(state => ({...state, doc: newDoc}), () => console.log(this.state.doc));
  };

  private save = () => {
    if (this.state.doc.title === '') return;
    if (this.state.doc.id === -1) {
      // is new
      console.log('Saving new', this.state.doc);
      fetchPOST({
        url: 'https://api.crowbait.de/docs',
        auth: true,
        body: JSON.stringify(this.state.doc)
      }).then(res => this.setState(state => ({doc: {...state.doc, id: parseInt(res as string)}})));
    } else {
      // update
      console.log('Updating', this.state.doc);
      fetchPOST({
        url: `https://api.crowbait.de/docs/${this.state.doc.id}`,
        auth: true,
        body: JSON.stringify(this.state.doc)
      });
    }
  };

  render() {
    // is viewer
    if (!this.state.isEditor) {
      return (
        <BasePageModal open={this.state.open} onClose={() => {
          this.setState(() => ({open: false}));
          this.props.onClose();
        }} height="80vh">
          <DocViewer doc={this.state.doc} onEdit={() => this.setEditor(true)} />
        </BasePageModal>
      );
    }

    // is editor
    return (
      <BasePageModal open={this.state.open} onClose={() => {
        if (this.state.isEditor) this.save();
        this.setState(() => ({open: false}));
        setTimeout(() => this.props.onClose(), 1000);
      }} height="80vh">
        <Grid container spacing={2} style={{height: '100%'}}>
          <Grid xs={6} style={{paddingRight: 32, height: '100%'}}>
            <TextField id="textfield-title" label="Title" value={this.state.doc.title}
              fullWidth size="small" style={{marginTop: 16, marginRight: 16}}
              onChange={e => this.setState(state => ({
                doc: {
                  ...state.doc,
                  title: e.target.value
                }
              }))}
              error={!this.state.doc.title} />
            <TextField id="textfield-path" label="Path" value={this.state.doc.path}
              fullWidth size="small" style={{marginTop: 8, marginRight: 16}}
              onChange={e => this.setState(state => ({
                doc: {
                  ...state.doc,
                  path: e.target.value
                }
              }))} />
            <TextField id="textfield-content" label="Content" value={this.state.doc.content}
              fullWidth size="small" multiline
              style={{marginTop: 16, marginRight: 16, height: '80%'}}
              inputProps={{style: {height: '100%', overflow: 'auto', fontFamily: 'monospace'}}}
              InputProps={{style: {height: '100%'}}}
              onChange={e => this.setState(state => ({
                doc: {
                  ...state.doc,
                  content: e.target.value.replaceAll('\r\n', '\n')
                }
              }))} />
          </Grid>
          <Grid xs={6} style={{height: '100%'}}>
            <DocViewer doc={this.state.doc} isEditor onSave={() => this.setEditor(false)}
              onRevert={() => this.setEditor(false, true)} />
          </Grid>
        </Grid>
      </BasePageModal>
    );
  }
}

export default ModalDocsFile;

解决方案 #

问题核心是组件关闭后状态未重置，或外部持有了旧实例引用，导致二次调用时操作的是带有旧状态的实例。

具体修复步骤： #

1. 关闭模态框时重置完整状态
   替换viewer和editor中的onClose回调，确保关闭时不仅隐藏模态框，还重置doc和isEditor状态：

onClose={() => {
  if (this.state.isEditor) this.save();
  this.setState({
    open: false,
    isEditor: false,
    doc: {
      id: -1,
      path: '',
      title: '',
      content: ''
    }
  }, () => {
    this.props.onClose();
  });
}}

2. 修正setEditor的异步状态依赖问题
   setState是异步操作，直接在setEditor中用this.state.doc赋值docPreEditing可能拿到旧状态，改用函数式更新获取最新状态：

public setEditor = (edit: boolean, skipSave?: boolean) => {
  this.setState(state => {
    if (edit) {
      this.docPreEditing = state.doc;
    }
    return {isEditor: edit};
  }, () => {
    if (edit === false && !skipSave) this.save();
    if (edit === false && skipSave) {
      this.setState(state => ({doc: this.docPreEditing || state.doc}));
    }
  });
};

3. 检查外部调用逻辑
   确保外部代码每次打开模态框时，操作的是当前活跃的组件实例，而非之前缓存的旧实例（比如通过ref获取时，确认ref指向最新组件）。

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