Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

Map of refs, current is always null

$
0
0

I'm creating a host of a bunch of pages, and those pages are created dynamically. Each page has a function that I'd like to call at a specific time, but when trying to access a ref for the page, the current is always null.

export default class QuizViewPager extends React.Component<QuizViewPagerProps, QuizViewPagerState> {    quizDeck: Deck | undefined;    quizRefMap: Map<number, React.RefObject<Quiz>>;    quizzes: JSX.Element[] = [];    viewPager: React.RefObject<ViewPager>;    constructor(props: QuizViewPagerProps) {        super(props);        this.quizRefMap = new Map<number, React.RefObject<Quiz>>();        this.viewPager = React.createRef<ViewPager>();        this.state = {            currentPage: 0,        }        for (let i = 0; i < this.quizDeck!.litems.length; i++) {            this.addQuiz(i);        }    }    setQuizPage = (page: number) => {        this.viewPager.current?.setPage(page);        this.setState({ currentPage: page })        this.quizRefMap.get(page)?.current?.focusInput();    }    addQuiz(page: number) {        const entry = this.quizDeck!.litems[page];        var ref: React.RefObject<Quiz> = React.createRef<Quiz>();        this.quizRefMap.set(page, ref);        this.quizzes.push(<Quiz                key={page}                litem={entry}                index={page}                ref={ref}                pagerFocusIndex={this.state.currentPage}                pagerLength={this.quizDeck?.litems.length!}                setQuizPage={this.setQuizPage}                navigation={this.props.navigation}                quizType={this.props.route.params.quizType}                quizManager={this.props.route.params.quizType === EQuizType.Lesson ? GlobalVars.lessonQuizManager : GlobalVars.reviewQuizManager}            />        )    }    render() {        return (<View style={{ flex: 1 }}><ViewPager                    style={styles.viewPager}                    initialPage={0}                    ref={this.viewPager}                    scrollEnabled={false}>                    {this.quizzes}</ViewPager></View >        );    }};

You can see in addQuiz() I am creating a ref, pushing it into my map, and passing that ref into the Quiz component. However, when attempting to access any of the refs in setQuizPage(), the Map is full of refs with null current properties.


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>