javascript - 如何在功能性 react 组件中对数组进行一次洗牌？

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 钩子(Hook)。

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} />
)