Я пытаюсь сделать простую карточную игру на соответствие с React Native. Итак, я создал массив ссылок, используя useRef (null), и применил их к компонентам моей карты, чтобы вызвать в них функцию при касании двух карт и сбросить их, когда они не совпадают. Моя проблема в том, что он работает только с ПЕРВОЙ картой, а не со второй. Думаю, я до сих пор плохо разбираюсь в рефах ...
Это мой компонент Card:
const Card = forwardRef(({content, index, cb}, ref) => {
...
// THIS IS THE FUNCTION I AM CALLING FROM THE PARENT.............
useImperativeHandle(ref, () => ({
hide() {
...
}
}))
tapped = () => {
...
cb(content, index);
...
}
return (
<TouchableWithoutFeedback onPress={tapped}>
...
</TouchableWithoutFeedback>
)
});
И это родительский компонент, использующий карты и обрабатывающий ( simple) game logi c:
export default MatchingCardGame = () => {
...
const [cards, setCards] = useState(shuffle(doubleCards)); // 20 cards
// Array of 20 refs to be applyed to the cards
const cardRefs = [...Array(cards.length)].map(() => useRef(null));
let tappedCards = [];
cardTapped = (content, index) => {
tappedCards.push({ content, index });
if(tappedCards.length == 2){
if( tappedCards[0].content == tappedCards[1].content ){
console.log('match !');
}
else{
console.log("doesn't match...");
cardRefs[tappedCards[0].index].current.hide();
// ........HERE IS THE PROBLEM, THAT LINE DOES NOTHING..........
cardRefs[tappedCards[1].index].current.hide();
}
tappedCards = [];
}
}
return (
...
{
cards.map((content, i) => {
return <Card content={content} key={i} index={i} ref={cardRefs[i]} cb={cardTapped} />
})
}
...
)
}
Первая карта в массиве tappedCards скрывается, но не вторая. Кто-нибудь может мне это объяснить? Я пробовал разные способы, но не могу понять ... Большое спасибо!