javascript - Next.js，使用随机属性而不触发 "did not match on server/client"错误

Question

我想随机生成 id表单输入的属性，以防止它们可能与具有相同 id 的其他输入发生冲突.如果我在同一页面上有两个登录表单，每个表单都有 email，则可能会发生这种情况。 field 。我想要/需要设置 id 的原因属性以便我可以设置 for label 上的属性(property)对应于那个输入。问题是这个随机生成的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>
    )
}

这是我得到的错误:

Warning: Prop 'htmlFor' did not match. Server: "email-txdmls" Client: "email-htte8e"

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

Answer 1

更新: React 18 添加了 useId可能会为此工作的钩子(Hook)。我还没有尝试过，但看起来它基本上是这个答案中代码的替代品。
我找到了解决方法。我不确定这是否是一个很好的解决方案(参见下面的解释)。仅仅为了从本质上抑制警告信息似乎很麻烦。仍然很想听到其他解决方案。老实说，即使是告诉 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在第一次渲染上。在此示例中，这不是问题，因为其目的主要是将标签与输入相关联，这将在第二次渲染时足够快地发生。但是，如果您在其他情况下使用此想法，请记住这一点。
如果您想将其封装到自定义 Hook 中，并稍微清理一下您的组件:

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>
    )
}