React类组件转函数组件报错：Cannot read properties of undefined (reading 'slice')

你遇到的TypeError: Cannot read properties of undefined (reading 'slice')报错，本质是代码中调用slice方法的目标变量为undefined，结合Yahtzee项目的业务逻辑，90%以上概率是和骰子数组dice的状态操作相关，以下是高频出错点及修复方案：

1. 状态初始化错误 #

这是类组件改函数组件最常见的疏漏：

• 类组件中你大概率是在构造函数中给dice设置了初始数组：this.state = { dice: Array(5).fill(0), ...其他状态 }
• 改成函数组件用useState时如果漏写初始值，写成const [dice, setDice] = useState()，那么首次渲染时dice就是undefined，调用dice.slice()时直接报错
• 修复方案：给useState补充和类组件一致的初始值：const [dice, setDice] = useState(Array(5).fill({ value: 0, isHeld: false }))（根据你实际的初始骰子结构调整即可）

2. 状态更新逻辑错误 #

• 类组件中你用this.setState更新dice，改成函数组件后如果setDice的入参写错，比如漏传参数、变量名拼写错误，会直接把dice设为undefined，下一次操作调用slice就会报错
• 排查点：检查所有setDice的调用位置，确认入参是正确的新骰子数组，不要出现setDice()或者setDice(wrongVariable)的写法

3. 事件处理函数引用错误 #

类组件的事件处理函数中你用this.state.dice获取骰子数组，改成函数组件后如果没有删掉this.state的引用，函数组件中的this为undefined，读取this.state.dice得到的就是undefined，调用slice直接报错

• 修复方案：所有事件处理函数中直接读取useState返回的dice变量即可，不要保留this.state相关的写法

4. 组件Props传递错误 #

如果你在Game组件给ScoreCard传参时写错了props名，比如类组件写的是<ScoreCard dice={this.state.dice} />，函数组件写成<ScoreCard dice={dices} />（变量名拼写错误），那么ScoreCard中拿到的dice就是undefined，如果ScoreCard内部调用了dice.slice()也会触发报错

快速排查方法 #

全局搜索三个组件代码中所有.slice()的调用位置，在每个调用的前一行打印对应的目标变量：

console.log('slice调用目标：', 你的变量名)

触发操作时看控制台打印的变量值，就能快速定位到哪个变量在什么时候变成了undefined，对应修正状态初始化/更新/传参逻辑即可。

内容的提问来源于stack exchange，提问作者Miroslav B