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

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) => {&nbsp; //shuffle logic here}const shuffledCards = React.useMemo(() => {&nbsp; const numbers = [1, 2, 3, 1, 2, 3];&nbsp;&nbsp;&nbsp; return shuffle(numbers);}, [])return (&nbsp; <cards shuffledCards={shuffledCards} />)

Answer 2

您的函数正在重新定义shuffleCards每次渲染的数组。如果将阵列置于状态，它将是稳定的。numbers将组件和外部组件定义shuffle为初始状态和效用函数const numbers = [1, 2, 3, 1, 2, 3];const shuffle = array => {&nbsp; // shuffle logic};组件逻辑：初始化状态并使用效果在组件挂载时对数组进行洗牌const CardShuffler = () => {&nbsp; const [shuffledCards] = useState(shuffle(numbers)); // initialize state&nbsp; return <Cards shuffledCards={shuffledCards} />;};