描述
我使用reactnativesectionlist来显示数据部分,
我必须在按下按钮的同时滚动到特定部分。
但是在滚动定位功能方面面临着一些问题,比如Cannot read the property 'data' of undefined, js engine: herms
。
甚至我已经给了足够的数据滚动在节列表。
我已经附上了代码。并附上下面的截图
版本
0.67.3
npx react-native info
的输出
系统:
操作系统:Windows 10
CPU:12个x64英特尔®酷睿™ i5-10400 CPU,主频2.90 GHz
内存容量:967.80 MB / 15.79 GB
二进制文件:
节点:16.17.0 - C:\程序文件\节点\节点. EXE
纱号:1.22.19 - ~\AppData\漫游\npm\纱号.CMD
npm:8.15.0 - C:\程序文件\节点\npm.CMD
观察员:未找到
软件开发工具包:
Android软件开发工具包:未找到
Windows软件开发工具包:
允许在没有开发许可证的情况下进行开发:已启用
IDE:
Android工作室:未找到
视觉工作室:未找到
语言:
Java:11.0.14 - C:\程序文件\公用文件\Oracle\Java\Java路径\javac.EXE
npm程序包:
@React-本地-社区/客户端:未找到
React:17.0.2 =〉17.0.2
原生React:0.67.3 =〉0.67.3
React-本机-窗口:未找到
npm全局程序包:
- 原生React *:未找到
重现步骤
当我单击按钮滚动到面临问题的特定位置时,
零食、代码示例、屏幕截图或指向存储库的链接
const SessionCardList = ({ data, viewType, isPoster, activeTabScreen, user, initialTabIndex, tabIndex, navigation, lastDayVisited, ...props }) => {
const { id } = data
const tabRef = useRef({})
const Item = ({ data, index, isLast, isPoster = false }) => {
return (
<View style={[{ marginBottom: isLast ? 15 : 0 }]} key={`item_session_${data._id}`}>
{<Card index={index} item={data} key={`item_card_${data._id}_card`} full navigation={navigation} config={props.activeConference} user={user} type={viewType} isPoster={isPoster} activeTabScreen={activeTabScreen.current} />}
</View>
);
}
setTimeout(() => {
if (initialTabIndex === tabIndex.current) {
tabRef?.current?.scrollToLocation(
{
animated: true,
sectionIndex: 3,
itemIndex: 1,
viewOffset: 0.5,
}
);
}
}, 500);
reactotron.log({ "render session card": "" });
return <>
<SectionList
sections={data}
keyExtractor={(item, index) => index}
ref={tabRef}
renderItem={({ item, index }) => {
return (<Item title={item.title} data={item} index={index} />)
}}
renderSectionHeader={({ section, index }) => {
return (
<View style={[localStyle.listHeader, localStyle.primaryBackgroundColor]}>
<Text style={localStyle.listHeaderText}>{section.title}</Text>
</View>
)
}}
stickySectionHeadersEnabled={true}
key={'SectionList' + id}
initialNumToRender={5}
onScrollToIndexFailed={(err) => {
const wait = new Promise(resolve => setTimeout(resolve, 600));
wait.then(() => {
if (initialTabIndex === tabIndex.current) {
tabRef?.current?.scrollToLocation(
{
animated: true,
sectionIndex: 3,
itemIndex: 1,
viewOffset: 0.5,
}
);
}
});
}}
/>
</>
}
export default memo(SessionCardList);
1条答案
按热度按时间w9apscun1#
你好@sankar9659。我遇到了同样的问题,我发现SectionList组件在scrollToLocation方法中使用了props.sections[i].data。如果props.sections未定义,可能会导致这个问题。所以我通过添加一个if条件来解决。
希望能有所帮助!
原始程式码
//虚拟化节列表. js