React报错Uncaught ReferenceError: Cannot access 'allNewDice' before initialization如何解决？

核心问题 #

你触发这个错误的原因是函数调用时机早于函数定义：在执行React.useState(allNewDice())初始化状态时，allNewDice函数还没被声明。虽然JavaScript函数声明会有提升特性，但在组件函数内部，你先执行了useState调用，后定义的allNewDice，所以JS引擎会判定该函数未初始化。

修复方案 #

1. 调整函数定义顺序 #

把allNewDice函数移到useState声明之前，确保调用时函数已经存在：

// 先定义生成骰子数组的函数
const allNewDice = () => {
  const newDice = [];
  for (let index = 0; index < 10; index++) {
    const randomNumber = Math.ceil(Math.random() * 6);
    newDice.push(randomNumber);
  }
  return newDice;
};

// 再调用函数初始化state
const [dice, setDice] = React.useState(allNewDice());

2. 修复组件渲染的隐性问题 #

你的diceElement变量中，map回调没有返回<Dices />组件，会导致页面无法渲染骰子。同时要给循环渲染的组件加上唯一key：

const diceElement = dice.map((die, index) => {
  return <Dices key={index} value={die} />;
});

（注：用数组index当key是临时方案，如果骰子数据有唯一标识，优先用唯一标识作为key）

完整修复后的Main组件代码 #

import "./Main.css";
import Dices from "../Dices/Dices";
import React from "react";

const Main = () => {
  const allNewDice = () => {
    const newDice = [];
    for (let index = 0; index < 10; index++) {
      const randomNumber = Math.ceil(Math.random() * 6);
      newDice.push(randomNumber);
    }
    return newDice;
  };

  const [dice, setDice] = React.useState(allNewDice());

  const rollDice = () => {
     setDice(allNewDice());
  }

  const diceElement = dice.map((die, index) => {
    return <Dices key={index} value={die} />;
  });

  return (
    <main>
      <div className="dice-container">{diceElement}</div>
      <button onClick={rollDice}>Roll</button>
    </main>
  );
};

export default Main;

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