如何在功能性反应组件中洗牌一次数组？

Question

我正在创建一个记忆游戏，我有一个洗牌函数，可以洗牌一个数字数组，这些数字被呈现为卡片，问题是每次状态改变时卡片都会被洗牌，我只需要用洗牌数组初始化我的组件即使状态改变，它仍然存在！我试过useEffect了，但它不起作用，或者我无法正确实现它代码：const numbers = [1, 2, 3, 1, 2, 3];const shuffle = (arr) => {//shuffle logic here}let shuffledCards;useEffect(() => {   shuffledCards = shuffle(numbers) // it doesn't help}, [])return(  <cards shuffledCards={shuffledCards} />)我怎样才能改变我的数组一次而不是每次改变状态！

Answer 1

你可以使用useMemo钩子。

const shuffle = (arr) => {

  //shuffle logic here

}

const shuffledCards = React.useMemo(() => {

  const numbers = [1, 2, 3, 1, 2, 3];  

  return shuffle(numbers);

}, [])

return (

  <cards shuffledCards={shuffledCards} />

)

Answer 2

您的函数正在重新定义shuffleCards每次渲染的数组。如果将阵列置于状态，它将是稳定的。

numbers将组件和外部组件定义shuffle为初始状态和效用函数

const numbers = [1, 2, 3, 1, 2, 3];

const shuffle = array => {

  // shuffle logic

};

组件逻辑：初始化状态并使用效果在组件挂载时对数组进行洗牌

const CardShuffler = () => {

  const [shuffledCards] = useState(shuffle(numbers)); // initialize state

  return <Cards shuffledCards={shuffledCards} />;

};