Refactoring a class component to Functional, ReferenceError-CodePudding

I am trying to refactor a class component, but in the class one, there is a state with map and I tried changing it to Functional and used useState but it keeps giving me this error

 ReferenceError: Cannot access 'rules' before initialization

it happens when I'm trying to refactor the State of rules(which I'm not sure how), with map, to useState. Is it even the correct way of assigning state for map and how can I fix it?

the class component :

import Rule from "./Rule";

class Game extends Component {

state = {
    dices: Array(this.props.nOfDices).fill(1),
    locked: Array(this.props.nOfDices).fill(false),
    rotation: Array(this.props.nOfDices).fill(0),
    rollsRemaining: 3,
    isRolling: false,
    rules: this.props.rules.map( r => ({...r})),
    score: 0,
    bestScore: window.localStorage.getItem("bestScore") || "0"
};

componentDidMount() {
    this.roll();
};

my refactored functional component :

const Game = ({ nOfDices }) => {
const [isRolling, setisRolling] = useState(false);
const [score, setScore] = useState(0);
const [rollsRemaining, setRollsRemaining] = useState(3);
const [dices, setDices] = useState([Array(nOfDices).fill(1)]);
const [rules, setRules] = useState(rules.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
}, []);

CodePudding user response：

You are currently setting rules to a map of itself...

const [rules, setRules] = useState(rules.map(r => ({ ...r })));

should it be coming from props as it is in the original?

state = {
  // ...
  rules: this.props.rules.map( r => ({...r})),
  // ...
}

If so you'll need to also destructure it out of props in the parameter declaration. (Here renaming it to avoid collision with the the state name Game = ({rules: _rules, nOfDices}) => ...)

Something like...

const Game = ({ rules: _rules, nOfDices }) => {
  const [isRolling, setisRolling] = useState(false);
  const [score, setScore] = useState(0);
  const [rollsRemaining, setRollsRemaining] = useState(3);
  const [bestScore, setBestScore] = useState(window.localStorage.getItem('bestScore') || '0');
  // nOfDices
  const [dices, setDices] = useState([Array(nOfDices).fill(1)]);
  const [locked, setLocked] = useState([Array(nOfDices).fill(false)]);
  const [rotation, setRotation] = useState([Array(nOfDices).fill(0)]);
  // rules
  const [rules, setRules] = useState(_rules.map((r) => ({ ...r })));

  // update state if `nOfDices` changes in props
  useEffect(() => {
    setDices([Array(nOfDices).fill(1)]);
    setLocked([Array(nOfDices).fill(false)]);
    setRotation([Array(nOfDices).fill(0)]);
  }, [nOfDices]);

  // update state if `_rules` changes in props
  useEffect(() => {
    setRules(_rules.map((r) => ({ ...r })));
  }, [_rules]);

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