如何在functional 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钩子。

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

​

​