Question

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

我在useMemo（）中使用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

在使用前需要定义参考。

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

还请注意，您只希望在有价值会议可用时才滚动toToIndex，因此可以通过跟踪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属性。

尝试在useMemo（）中使用ref时出错

1 个答案: