为什么SectionList ref.current总是未定义?

发布于 2025-01-10 23:23:42 字数 2048 浏览 4 评论 0原文

我正在尝试使用 SectionList 提供的 scrollToOffsetscrollToIndex 。但是,在使用 ref.current 时,我使用的 SectionList 引用始终未定义。

在我的类组件中,我有以下内容:

private sectionListRef: any;

constructor(props: SampleScreenProps) {
    super(props);
    this.sectionListRef = null;
}

componentDidMount = (): void => {
    setTimeout(() => this.scrollToSection(), 2000);
};

scrollToSection = (): void => {
    
    // do some calculations to get the itemIndex and sectionIndex to scroll to

    this.sectionListRef.scrollToLocation({
        animated: false,
        itemIndex,
        sectionIndex,
        viewPosition: 0.5
    }); // this fails if the list is huge and the indices are far from the initial render location, and so moves on to onScrollToIndexFailed 
};

onScrollToIndexFailed = (error) => {
    // this.sectionListRef.current is always undefined in this function

    this.sectionListRef.current?.scrollToOffset({
        offset: error.averageItemLength * error.index,
        animated: true
    });
    setTimeout(() => {
        if (this.state.dataSet.length !== 0 && this.sectionListRef !== null) {
            this.sectionListRef.current?.scrollToIndex({ index: error.index, animated: true });
        }
    }, 10);
};

最后,这是 SectionList 本身:

<SectionList
    inverted
    ref={(ref) => {
        this.sectionListRef = ref;
    }}
    sections={mappedSections}
    renderItem={this.renderItem}
    renderSectionFooter={this.renderSectionFooter}
    keyExtractor={(item, index) => index.toString()}
    keyboardShouldPersistTaps="never"
    keyboardDismissMode="on-drag"
    bounces={false}
    initialNumToRender={20}
    onScrollToIndexFailed={this.onScrollToIndexFailed}
/>

这是什么原因?

编辑:我尝试在构造函数中执行 this.sectionListRef = React.createRef() ,但结果相同。

我知道 scrollToOffsetSectionList 的一部分,但其他两个滚动函数是底层虚拟化列表的一部分,但据我所知,它的工作原理应该仍然相同。

I am trying to use the scrollToOffset and scrollToIndex that SectionList provides. However, the SectionList ref I am using is always undefined when using ref.current.

In my class component I have the following:

private sectionListRef: any;

constructor(props: SampleScreenProps) {
    super(props);
    this.sectionListRef = null;
}

componentDidMount = (): void => {
    setTimeout(() => this.scrollToSection(), 2000);
};

scrollToSection = (): void => {
    
    // do some calculations to get the itemIndex and sectionIndex to scroll to

    this.sectionListRef.scrollToLocation({
        animated: false,
        itemIndex,
        sectionIndex,
        viewPosition: 0.5
    }); // this fails if the list is huge and the indices are far from the initial render location, and so moves on to onScrollToIndexFailed 
};

onScrollToIndexFailed = (error) => {
    // this.sectionListRef.current is always undefined in this function

    this.sectionListRef.current?.scrollToOffset({
        offset: error.averageItemLength * error.index,
        animated: true
    });
    setTimeout(() => {
        if (this.state.dataSet.length !== 0 && this.sectionListRef !== null) {
            this.sectionListRef.current?.scrollToIndex({ index: error.index, animated: true });
        }
    }, 10);
};

finally, here's the SectionList itself:

<SectionList
    inverted
    ref={(ref) => {
        this.sectionListRef = ref;
    }}
    sections={mappedSections}
    renderItem={this.renderItem}
    renderSectionFooter={this.renderSectionFooter}
    keyExtractor={(item, index) => index.toString()}
    keyboardShouldPersistTaps="never"
    keyboardDismissMode="on-drag"
    bounces={false}
    initialNumToRender={20}
    onScrollToIndexFailed={this.onScrollToIndexFailed}
/>

What is the cause of this?

Edit: I tried doing this.sectionListRef = React.createRef() in the constructor instead, but same result.

I understand scrollToOffset is part of SectionList, but the other two scroll functions are part of the underlying virtualized list, but it should still work the same as far as I know.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文