相关疑难解决方法(0)

我想随机生成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的不同方式？