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

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

我怎样才能改变我的数组一次而不是每次改变状态！

标签： javascriptreactjsreact-hooks

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