### 錯誤 : Update on an unmounted component
可能大家都會有遇過以下的錯誤 :
> Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
### 發生原因
是因為 `setState() ` 發生在 `componntWillUnmount()` 之後，其實這個錯誤並不會引起 UI 上的出錯，它只是告訢你所 setState 的內容因為 Component Unmounted 而不能成功更新 UI。
而筆者的經驗來說，這個情況在 Ajax 時會時常發生，通常 Ajax 在發生在 `componentDidMount()` 時。如果在 Ajax 載入資料時，這是 component unmount 了的話，在 Ajax 回傳時的 callback 如果有 `setState()` 的話，就會發生這個問題。
### 解決問題
方間有兩個比較大跟的方法去解決這個題問。
#### Flag 模式
下面的方法是利用 `_isMounted` 來判定 component 的狀態來決定是否使用 `setState()` 來更新狀態。
```js
class MyPage extends React.Component {
constructor(props) {
super(props);
this._isMounted = false;
}
componentDidMount() {
this._isMounted = true;
fetch('some.json')
.then(r => {
this._isMounted && this.setState(r);
});
}
componentWillUnmount() {
this._isMounted = false;
}
}
```
#### Reference 模式
下面是利用 ref 的方式來推判出 component 的狀態，雖然這個方法比較間接，但相對比較接近原生的語法。
```js
class MyPage extends React.Component {
constructor(props) {
super(props);
this.rootRef = Ref.createRef();
}
componentDidMount() {
fetch('some.json')
.then(r => {
this.rootRef.current && this.setState(r);
});
}
render() {
return (
<div ref={this.rootRef} />
);
}
}
```