React.js 我在 prod 中有 Bug，但在 dev 模式下沒有，你能幫幫我嗎

Question

我已經有3天的問題了，我真的不明白是什么導致了這個錯誤，你能幫我嗎？

這就是問題所在，我創建了一個小游戲（react.js），其中每次重新加載時顯示 5 張卡片，這 5 張卡片每張都有一個分數，每次累積，這給出了所有卡片的分數，然后累積的每個“手”的分數。

在開發模式下，一切正常，但如果我構建並將其放在 cdn (netlify) 上，則分數邏輯不起作用......

產品鏈接（錯誤）： https ://are-you-lucky-game.netlify.app/

Github repo 鏈接（開發模式工作正常）： https ://github.com/rodolphe37/random-playing-card-tuto/tree/step-3-final

我認為問題可能來自這里：

在我的控制台上渲染（在開發中）

score: undefined
classment from ScoreForm {pts: 0, name: ''}
scoreArray (5) [3, 7, 10, 15, 2]
classment from center Page {pts: 0, name: ''}
classment from state {pts: 0, name: ''}
classment from session  {pts: 0, name: ''}

score: undefined
classment from ScoreForm {pts: 0, name: ''}
scoreArray (5) [3, 7, 10, 15, 2]
classment from center Page {pts: 0, name: ''}
classment from state {pts: 0, name: ''}
classment from session  {pts: 0, name: ''}

score: 0
classment from ScoreForm {pts: 37, name: ''}
score: 37

在開發中，我的組件被渲染了幾次（我認為是 3 或 4 次），並且在最后一次渲染時，信息就在那里。

在我的控制台中（產品模式）

score: undefined
classment from ScoreForm {pts: 0, name: ''}
scoreArray (5) [5, 25, 3, 6, 1]
classment from center Page {pts: 0, name: ''}
classment from state {pts: 0, name: ''}
classment from session  {pts: 0, name: ''}
score: 0
classment from ScoreForm {pts: 0, name: ''}``

在生產中，我認為我的組件被渲染了兩次，所以我的值不存在。

如何確保我的信息（它來自 sessionStorage）出現在每個組件的第一次渲染中？

如果您曾經遇到過這種錯誤，或者您認為您有適合我的解決方案，我很感興趣。

提前致謝！

Answer 1

我可以在您的存儲庫中看到您在 package.json 中使用browserslist這在 react-create-app 中很常見，因為該庫將根據提供的配置捆綁您的代碼。 請注意，您有兩種不同的開發和生產配置，請嘗試將開發中的相同配置也用於生產對象，這應該可以解決您的問題。