![\"image.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/d2078de4-b468-4830-89d4-e24a24186c96.png\")
\nこんにちは、t-hiroyoshiです。
\n最近はReactやreduxを使ってUIを開発しているのですが、両方ともガンガン更新されていくので追いかけるのがとても楽しい日々を過ごしています。
突然ですが、Reactで開発していて次のようなWarningを見たことはありませんか？
\nWarning: setState(...): Can only update a mounted or mounting component.\nThis usually means you called setState() on an unmounted component.\nThis is a no-op. Please check the code for the undefined component.\nこれはUnmountされたコンポーネントのsetState()を呼んだ時に出るもので、回避する方法があります。
その回避方法はReact.ComponentAPIのisMounted()を使いUnmountされたコンポーネントへの処理を回避することです。
\nisMounted()はそのコンポーネントがmountされている時はtrue、そうでない時はfalseを返してくれるので非同期処理などでUnmountされたコンポーネントに対するsetState()やfourceUpdate()を防ぐ事が可能になります。
がしかし、なんとES6のclassを使ってReactを書いているとisMounted()は使えません！
\nなのでその簡単な代替方法を紹介します、それはコンポーネントのstateでisMountedを持つ方法です。
import React from \"react\";\n\nclass Something extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isMounted: false,\n word: \"foo\"\n };\n }\n\n componentDidMount() {\n this.setState({ isMounted: true });\n }\n\n componentWillUnmount() {\n this.setState({ isMounted: false });\n }\n\n someAction() {\n const { isMounted } = this.state;\n\n // UnmountされていたらsetStateしない。\n if (isMounted) {\n this.setState({ word: \"bar\" });\n }\n }\n\n render() {\n // …\n }\n}\nこのようにする事でUnmountされたコンポーネントへのsetState()やforceUpdate()をES6でも防ぐ事ができます。