javascript - Next JS - 如何在构造函数中将随机数设置为 id

Question

如何修复以下错误？

Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

这是我的代码。

export class Card {                
    constructor(props) {              
        this.id = Math.random();    
    }
}

如果我将 id 更改为如下所示的静态数字，错误就会消失，但我需要将 id 设为随机数。

export class Card {                
    constructor(props) {              
        this.id = 3
    }
}

Answer 1

您应该在客户端检查。

1. 找出答案的最简单方法是使用 componentDidMount 并通过创建随机数来设置状态。在功能一中，将使用 useEffect。
2. 另一种方法是检查 typeof window === 'undefined'。如果它为 false，则 window 存在，您可以为所欲为。