Массив ссылок с forwardRef в response-native: кажется, что только один доступен одновременно? - PullRequest
0 голосов
/ 30 мая 2020

Я пытаюсь сделать простую карточную игру на соответствие с 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 скрывается, но не вторая. Кто-нибудь может мне это объяснить? Я пробовал разные способы, но не могу понять ... Большое спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...