AtlasKit表单提交方法中的状态变更问题

Question

在Atlaskit Form的Form方法中，我希望更改状态属性的值，该值将导致表单被隐藏：

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

但是，这会导致一个反应错误：

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

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

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

因此，很明显，当我改变状态时，表单仍然在卸载(虽然我不知道这会对表单产生什么影响，但我对反应还不太熟悉)。我在这里应该采取什么方法？

Answer 1

这是因为您向API发出了异步请求，请求(例如诺言)尚未得到解决，但您需要卸载组件。

您可以通过维护一个标志来解决这个问题，比如_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() {
    ...
  }
}