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

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

我在UseMoom（）中使用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>
                )
    }

const WeeklyMeetings=props=>{
const[meetings，setMeetings]=useState（null）
useffect（（）=>{
AllMeeting（）//正在从服务器获取数据
}, []) 
const getResult=useMoom（（）=>{
flatListRef.current.scrollToIndex（{索引：15，动画：true}）
}，[会议]；
const flatListRef=useRef（）；
const AllMeeting=async（id）=>{
设置加载（真）
试一试{
持续会议=等待会议。所有会议SASC（id）
会议
}捕获（错误）{
日志（“错误”，错误）
} 
}
返回(
{}}
/>
)
}

使用ref之前需要定义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>
                )
    }

const WeeklyMeetings=props=>{
const[meetings，setMeetings]=useState（null）
useffect（（）=>{
const AllMeeting=async（id）=>{
设置加载（真）
试一试{
持续会议=等待会议。所有会议SASC（id）
会议
}捕获（错误）{
日志（“错误”，错误）
} 
}
所有会议（）；
}, []) 
const flatListRef=useRef（）；
const initialRender=useRef（真）
useffect（（）=>{
如果（！initialRender.current）{
flatListRef.current.scrollToIndex（{索引：15，动画：true}）
}否则{
initialRender.current=false；
}
}，[会议]）
返回(
(
{长度：50，偏移量：50*索引，索引}
)}
/>
)
}

据

您需要为FlatList实现getItemLayout函数 因为scrollToIndex无法滚动到渲染外部的位置 窗口，而不指定getItemLayout属性

---

给ref一个初始值，

const flatListRef=useRef（null）我刚刚尝试过，但也遇到了同样的错误。您希望如何处理getResult。在您的案例中，useMemo似乎没有返回任何值？@ShubhamKhatri我不想对getResult做任何事情，我只想在从服务器检索数据后使用Memo（）滚动平面列表。好吧，您正在尝试在函数体中定义它之前使用它。另外，这并不是
useMemo
设计的目的，它只是记忆一个值。相反，你可能只需要一个
useffect
来做一个副作用，比如将元素滚动到视图中。我刚刚尝试过这个代码，当我打开屏幕时，它不会滚动到任何地方，在调试器initialRender always{current:false}中，initalRender应该在initalRender之后保持为false。仅当更新meetings值时，
flatListRef.current.scrollToIndex（{index:15，animated:true}）
才应被调用更正：因此initialRender首先为true，然后为false，如果要在其中添加控制台日志，则显示If，但它不会滚动平面列表。请为平面列表实现getItemLayout函数，因为索引可以在渲染视图之外。即使在实现getItemLayout（）之后，它仍然不会在打开的屏幕上滚动列表