Question

在Atlaskit submit的{{1}}方法中，我想更改状态属性的值，该值导致表单被隐藏：

Form

但是，这会导致React错误：

无法在已卸载的组件上执行React状态更新。这是无操作，但表示您的应用程序内存泄漏。修理，取消所有订阅和异步任务 componentWillUnmount方法。

稍后再设置该值时，错误消失：

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

因此，当我更改状态时，表单显然仍在卸载（尽管我不知道为什么这会影响表单，但是我对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() {
    ...
  }
}

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

1 个答案: