未捕获的引用错误：初始化之前无法访问“allNewDice”....reactjs useState

Question

嗨朋友们:::: 需要帮助::: 我正在尝试编写代码，但我收到一条消息::::: 未捕获的引用错误：初始化之前无法访问“allNewDice”...任何人都可以帮助我解决这个问题...请

import "./Main.css";
import Dices from "../Dices/Dices";
import React from "react";
const Main = () => {
  const [dice, setDice] = React.useState(allNewDice());

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

  const rollDice = () => {
     setDice(allNewDice());
  }
  const diceElement = dice.map((die) => {
    <Dices value={die} />;
  });


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

export default Main;

.....................

import "./Dices.css";

const Dices = (props) => {
  return <div className="dice"> {props.value} </div>;
};

export default Dices;

Answer 1

错误告诉您：初始化之前无法访问'allNewDice'。 在调用之前，您需要初始化并声明 allNewDice 函数。

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

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

Answer 2

allNewDice 函数是在骰子状态的初始值中调用后定义的。

要修复此错误，您可以调用作为状态初始值传递的表达式内的函数：

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

希望这有帮助。