React类组件转函数组件出现rules初始化前无法访问错误如何解决

错误原因 #

• 变量名冲突导致访问未初始化变量：你在声明rules状态时，useState的初始值中直接调用了rules.map，这里的rules是你正在定义的状态变量，还未完成初始化，自然会触发访问前的引用报错。原类组件中你是从this.props.rules取源数据做映射，重构时你既没有在组件参数中接收rules这个props，还错误的用了正在声明的状态变量作为源数据。
• 数组结构错误：dices、locked、rotation三个状态的初始值多套了一层数组括号，原类组件逻辑是生成一维数组，你现在的写法会得到二维数组，后续操作骰子的逻辑会全部出错。

修复方案 #

1. 先在组件参数中补全接收rules这个props，为了避免和状态变量重名可以先重命名
2. 将rules状态的初始值的源数据替换为props传入的rules
3. 删掉三个数组状态外层多余的数组括号

修复后的代码如下：

import { useState, useEffect } from "react";
import Rule from "./Rule";

const Game = ({ nOfDices, rules: propsRules }) => {
  const [isRolling, setisRolling] = useState(false);
  const [score, setScore] = useState(0);
  const [rollsRemaining, setRollsRemaining] = useState(3);
  const [dices, setDices] = useState(Array(nOfDices).fill(1));
  // 用props传入的rules作为源数据做映射
  const [rules, setRules] = useState(propsRules.map(r => ({ ...r })));
  const [bestScore, setBestScore] = useState(window.localStorage.getItem("bestScore") || "0");
  const [locked, setLocked] = useState(Array(nOfDices).fill(false));
  const [rotation, setRotation] = useState(Array(nOfDices).fill(0));


  useEffect(() => {
    roll();
    //eslint-disable-next-line
  }, []);

  // 剩余原有逻辑保持不变即可
}

如果后续props传入的rules会动态变化，可以加一段副作用同步更新状态：

useEffect(() => {
  setRules(propsRules.map(r => ({ ...r })))
}, [propsRules])

如果是静态数据就不需要加这段逻辑。

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