Next.jsでmdファイルをpre-renderingしてhtmlに変換し、その結果を表示するシンプルなサイトを作成しています。
非常にシンプルな構成のサイトなのですが、ページ遷移や言語切り替えをローディング直後に連打すると
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 a useEffect cleanup function.
という警告文が表示されます。
以下のpre-rendering処理に何か問題があるのでしょうか?
pre-rendering処理(公式のドキュメントを参考に実装)
// getAllPostIds, getSortedHeadlineTitles, getPostDataはライブラリにあるメソッドで、postsディレクトリに格納されているmdファイルの内容を展開しています
export async function getStaticPaths({ locales }) {
const paths = getAllPostIds(locales)
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params, locale }) {
const sortedHeadlineTitles = getSortedHeadlineTitles(locale);
// ids = ['04', '03', '02', '01']
const ids = []
let n = parseInt(params.id, 10);
while (0 < n) {
const strId = `0${n}`;
ids.push(strId)
n = n - 1;
}
const postAllData = async () => {
return await Promise.all(
ids.map(async (id) => {
const postData = await getPostData(id, locale);
return {
id,
contents: postData,
}
})
)
};
return {
props: {
sortedHeadlineTitles,
postAllData: await postAllData(),
locale,
}
}
}
export default function Post({ sortedHeadlineTitles, postAllData, locale }) {
return (
<Layout sortedHeadlineTitles={sortedHeadlineTitles}>
<About locale={locale} />
{postAllData.map((postData) => (
<PostData postData={postData} key={postData.id} />
))}
</Layout>
)
}
警告文の通りに解釈すると、unMount時にも更新がかかってしまっているそうです。
バンドル後のdevツールで確認したコードは
function Post(_ref) {
_s();
var _this = this;
var sortedHeadlineTitles = _ref.sortedHeadlineTitles,
postAllData = _ref.postAllData,
locale = _ref.locale;
以下 割愛
となっており、この
var sortedHeadlineTitles = _ref.sortedHeadlineTitles,
が問題だとdevツールで記載されていました。
ヒントでも結構ですのでご教示いただけますと幸いです。