Question

为什么当应用程序在 React Native 中移动到另一个屏幕时，得到的 null 不是一个对象

2022-08-22

493

javascript react-native

我为主屏幕创建了一个自动滚动平面列表。当用户注销时，它会将用户引导至登录屏幕。问题是，当应用程序将用户引导至登录屏幕时，我得到了 TypeError：null 不是对象（评估“ref.current.scrollToIndex”） 。发生了什么，我该如何解决？

自动滚动平面列表组件：

export const BannerCarousel = React.forwardRef((props, ref) => {
    let index = 0;
    const totalIndex = props.data.length ;
    useEffect (() => { 
        setInterval (() => {
            index = index + 1;
            if(index < totalIndex) {
                ref.current.scrollToIndex({animated: true, index: index})
            } else {
                ref.current.scrollToIndex({animated: true, index: 0})
                index = 0;
            }
        }, 3000)
    }, []);
    
    return (
        <View style={{paddingHorizontal: 10}} >
            <FlatList 
                ref={ref}
                data={props.data} 
                keyExtractor={data => data.id}
                renderItem={renderItem}
            /> 
        </View>
    );
});

Home.js

const ref = React.createRef() 
    return (
      <BannerCarousel fromLocal={true} data={TopBannerData} ref={ref}/>
    );

Answer 1

我发现错误发生是因为 BannerCarousal 组件正在尝试查找 ref.current 。当用户重定向到登录屏幕时， ref.current 就消失了。这就是错误 null is not an object 发生的原因。这是我的解决方案：

export const BannerCarousel = React.forwardRef((props, ref) => {
    let index = 0;
    const totalIndex = props.data.length ;
    useEffect (() => { 
        setInterval (() => {
            if(ref.current !== null) {
              index = index + 1;
              if(index < totalIndex) {
                  ref.current.scrollToIndex({animated: true, index: index})
              } else {
                  ref.current.scrollToIndex({animated: true, index: 0})
                  index = 0;
              } 
            }
            
        }, 3000)
    }, []);
    
    return (
        <View style={{paddingHorizontal: 10}} >
            <FlatList 
                ref={ref}
                data={props.data} 
                keyExtractor={data => data.id}
                renderItem={renderItem}
            /> 
        </View>
    );
});

Answer 2

您在哪里引用 useRef flatListRef ？它似乎没有引用任何有效节点。因此它返回..

TypeError: null is not an object (evaluating 'flatListRef.current.scrollToIndex')

Answer 3

嘿，最初 ref 可能未在第一次渲染时附加，因此您可以像这样执行此操作 @Nomel

 setInterval (() => {
            index = index + 1;
            if(index < totalIndex) {
                ref?.current?.scrollToIndex({animated: true, index: index})
            } else {
                ref?.current?.scrollToIndex({animated: true, index: 0})
                index = 0;
            }
        }, 3000)

无论如何，您的非空检查也可以正常工作:)