尝试在useMem()中使用ref时出错

Question

当屏幕启动并且从服务器检索列表数据时，我想将FlatList滚动到特定索引。

我有一个在useMem((中使用ref的问题。我收到一个错误：

无法读取未定义的当前属性。

如何修复此错误？我的方法正确吗？

以下是我正在做的：

const WeeklyMeetings = props => {
const [meetings, setMeetings] = useState(null)
useEffect(() => {
AllMeeting() // getting data from the server 
}, []) 
const getResult = useMemo(() => {
flatListRef.current.scrollToIndex({index: 15, animated: true })
}, [meetings]);
const flatListRef = useRef();

const AllMeeting = async (id) => {
setLoading(true)
try {
const meetings = await meeting.allMeetingsAsc(id)
setMeetings(meetings)
} catch (error) {
console.log("error ", error)
} 
}
return (
<View style={styles.rootContainer}>
<FlatList
ref={flatListRef}
style={styles.list}
data={meetings}
renderItem={renderItem}
onScrollToIndexFailed={()=>{}}
/>
</View>
)
}

Answer 1

在使用ref之前需要定义它。

此外，由于您只想在收到会议值时滚动到索引，因此可以使用useEffect挂钩。

还要注意的是，您只想在值会议可用时滚动到索引，因此您可以通过跟踪initialRender 跳过对useEffect的初始调用

const WeeklyMeetings = props => {
const [meetings, setMeetings] = useState(null)
useEffect(() => {
const AllMeeting = async (id) => {
setLoading(true)
try {
const meetings = await meeting.allMeetingsAsc(id)
setMeetings(meetings)
} catch (error) {
console.log("error ", error)
} 
}
AllMeeting();
}, []) 

const flatListRef = useRef();
const initialRender = useRef(true)
useEffect(() => { 
if(!initialRender.current) {
flatListRef.current.scrollToIndex({index: 15, animated: true })
} else {
initialRender.current = false;
}
}, [meetings])

return (
<View style={styles.rootContainer}>
<FlatList
ref={flatListRef}
style={styles.list}
data={meetings}
renderItem={renderItem}
getItemLayout={(data, index) => (
{length: 50, offset: 50 * index, index}
)}
/>
</View>
)
}

根据Documentation

您需要为FlatList实现getItemLayout函数由于scrollToIndex无法滚动到渲染之外的位置窗口，而不指定getItemLayout道具。