Next.js，使用随机属性而不触发“与服务器/客户端不匹配”错误

Question

我想随机生成id表单输入的属性，以防止它们与具有相同id. 如果我在同一页面上有两个登录表单，每个表单都有一个email字段，就会发生这种情况。我想要/需要设置id属性的原因是我可以for在label对应于该输入的上设置属性。问题是这个随机生成的id在服务器端和客户端是不同的，所以next.js会报错。这是一些代码：

function uniqueId() {
    let first = (Math.random() * 46656) | 0
    let second = (Math.random() * 46656) | 0
    first = ('000' + first.toString(36)).slice(-3)
    second = ('000' + second.toString(36)).slice(-3)
    return first + second
}

const Login = () => {
    const [emailId] = useState(uniqueId())

    return (
        <form>
            <label htmlFor={emailId}>Email</label>
            <input id={emailId} name='email' type='email' />
        </form>
    )
}

这是我得到的错误：

警告：道具 'htmlFor' 不匹配。服务器：“email-txdmls”客户端：“email-htte8e”

知道如何生成在服务器/客户端上一致的随机 id 吗？或者也许是一种没有随机ID的不同方式？

Answer 1

我找到了解决方法。我不确定这是否是一个很好的解决方案（请参阅下面的解释）。只是为了抑制警告消息似乎很麻烦。仍然很好奇听到替代解决方案。老实说，即使是告诉 next.js 忽略差异而不发出警告的方法也可以正常工作（SSR 和客户端上的 id 不同并不重要）。

所以我所做的是在useEffect钩子中生成 id 。问题是初始服务器端呈现的 HTML 没有id输入。直到所有的 JS 都处理完才得到一个 id。不理想。

const Login = () => {
    const [emailId, setEmailId] = useState(null)

    useEffect(() => {
        setEmailId(uniqueId())
    }, [])

    return (
        <form>
            <label htmlFor={emailId}>Email</label>
            <input id={emailId} name='email' type='email' />
        </form>
    )
}

应该注意的是，id 将出现null在第一次渲染上。在此示例中，这不是问题，因为目的主要是将标签与输入相关联，这将在第二次渲染时足够快地发生。但是，如果您在其他情况下使用这个想法，请记住它。

如果您想将其封装到自定义钩子中，并稍微清理一下您的组件：

const useUniqueId = () => {
    const [id, setId] = useState(null)

    useEffect(() => {
        setId(uniqueId())
    }, [])

    return id
}

const Login = () => {
    const emailId = useUniqueId()
    const nameId = useUniqueId()

    return (
        <form>
            <label htmlFor={nameId}>Name</label>
            <input id={nameId} name='name' type='text' />

            <label htmlFor={emailId}>Email</label>
            <input id={emailId} name='email' type='email' />
        </form>
    )
}