在我的许多组件中，我需要执行以下操作：

handleSubmit() {
  this.setState({loading: true})
  someAsyncFunc()
    .then(() => {
      return this.props.onSuccess()
    })
    .finally(() => this.setState({loading: false}))
}

函数代码

• 可能是promise，也可能不是promise（如果是promise，加载应保持真实，直到问题得到解决）
• 可能卸载组件，也可能不卸载组件（它可能关闭此组件所在的模式，甚至导航到其他页面）

如果函数卸载组件，。setState（{loading:false}）显然会触发一个警告无法对未安装的组件调用setState（或forceUpdate）

我的两个问题：

1. 有没有一个简单的方法来避免这个问题？我不想在componentDidMount和componentWillUnmount中设置一些\u isMounted变量，然后在需要时在我的大多数组件中检查它，而且下次写类似这样的东西时，我可能会忘记这样做

编辑：第二个问题对我来说比第一个问题更重要一点。如果这真的是一个问题，我只是不能在未安装的组件上调用setState，我可能会自己找到一些解决方案。但是我很好奇我是否不能忽略它。

问题的实例：

const someAsyncFunc = () => new Promise(resolve => {
  setTimeout(() => {
  	console.log("someAsyncFunc resolving");
    resolve("done");
  }, 2000);
});

class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {loading: false};
  }
  
  componentDidMount() {
    setTimeout(() => this.handleSubmit(), 100);
  }
  
  handleSubmit() {
    this.setState({loading: true})
    someAsyncFunc()
      /*
      .then(() => {
        return this.props.onSuccess()
      })
      */
      .finally(() => this.setState({loading: false}))
  }
  
  render() {
    return <div>{String(this.state.loading)}</div>;
  }
}

class Wrapper extends React.Component {
	constructor(props, ...rest) {
  	super(props, ...rest);
    this.state = {
    	children: props.children
    };
  }
	componentDidMount() {
  	setTimeout(() => {
    	console.log("removing");
    	this.setState({children: []});
    }, 1500)
  }
	render() {
  	return <div>{this.state.children}</div>;
  }
}

ReactDOM.render(
	<Wrapper>
    <Example />
	</Wrapper>,
  document.getElementById("root")
);

.as-console-wrapper {
  max-height: 100% !important;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>