reactjs - AtlasKit Form的提交方法中的状态更改问题

Question

在submitAtlaskit 的方法中Form，我想更改导致表单被隐藏的状态属性的值：

<Form onSubmit={data => {
    return new Promise(resolve => {
        setShowForm(false);
        resolve();
    })
  }}>
</Form>

但是，这会导致 React 错误：

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。

当我稍后设置该值时，错误消失了：

setTimeout(() => setShowForm(false));

所以很明显，当我改变状态时，表单仍在卸载（虽然我不知道为什么这会影响表单，但我对 React 还不太熟悉）。我应该在这里采取什么方法？

Answer 1

这是因为您向 API 发出了异步请求，请求（例如 Promise）尚未解决，但您卸载了组件。

您可以通过维护一个标志来解决此问题，例如 _isMounted 以查看组件是否已卸载，并根据承诺解决方案更改标志值。

// 示例代码

class Form extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    axios
      .get('my_api_url')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            data: result.data.data,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}