Как перетасовать массив один раз в функциональную компоненту реакции?

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

Журнал компонента c: инициализация укажите и используйте эффект, чтобы перетасовать массив при монтировании компонента

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

  return <Cards shuffledCards={shuffledCards} />;
};