添加输入字段时 Next.JS 应用程序在浏览器中冻结

Question

我正在使用 Next.JS 构建表单。我有两个输入，并且使用了读取和验证输入中文本的通用反应方式。

"use client"
import { firebaseApp } from '@/app/firebase';
import React, { useCallback, useEffect, useState } from 'react'
import { collection, getDocs, getFirestore } from "firebase/firestore";

export default async function skills() {
    const [title, settitle] = useState("");
    const [tags, setTags] = useState("");
 
  return (
    <div>
        <form >
            <input type="text" name='title' id="title" placeholder='title'/>
            <input type="text" name='tags' id="tags" placeholder='tags(, seperated)' value={tags} onChange={e=>setTags(e.target.value)} />
            <button>+</button>
        </form>
    </div>
  )
}

我在 Brave 和 Chrome 上尝试过这段代码，它都会冻结两者的页面。页面冻结得非常严重，甚至开发工具也停止响应。我有一种感觉，它可能与某种内存泄漏有关，但我不能确定。

我认为这可能是我使用 firebase auth 实现登录的方式的问题，但即使绕过此代码也会冻结。

这是我第一次使用 Next.JS，我不确定是什么原因造成的。

编辑：我能够收集表演录音的预览

我认为 onChange 可能会导致多次重新渲染，我看到较小的 GC 启动，所以也许 onChange 监听器没有正确设置。我不确定。

内存出现不稳定尖峰模式的最后一部分是当我开始向标签字段添加值时。

Answer 1

您需要async从客户端组件中删除该关键字。目前仅在服务器上支持异步组件。