Question

我正在尝试使用Flatlist（例如instagram和Twitter）进行无限滚动加载。在YouTube https://www.youtube.com/watch?v=WcGd8VkRc48上找到了一个与此API和功能完美配合的视图。我将逻辑应用于相同的api并工作。但是，当我将其应用于我的API时，它给了我错误“无效的尝试传播不可迭代实例的尝试”

所以，这是交易。 componentDidMount（）可以完美地进行抓取，并且效果很好。现在，flatlist带有刷新整个列表或继续加载以后的帖子的选项，例如我们在instagram和时间轴应用程序中所做的操作。

刷新整个列表（向下滑动）非常完美。但是，当我到达列表的末尾时，我调用了一个加载下一项的函数，但是此时会出现错误。对象数组一定要有东西，但是早期的视频可以用同样的方式完美地工作！请帮助

state = {
        isLoading: true,
        refreshing:false,
        page:0,
        loading: false,
        data:[],
        photoLoading: false,
        photoLoading2: false,
  };

renderItem = ({item}, i) => {'this render item works and has no problem}

_onRefresh = async () =>{
    this.setState({refreshing: true});
    const tk = await AsyncStorage.getItem('userToken');
    console.log(tk);
    fetch('MY API LINK /?skip=0&limit=5', {
        method: 'GET',
        headers:{
            'Content-type':'application/json',
            'x-access-token': tk
        }
    })
        .then((response) => response.json())
        .then((responseJson) => {
            if(responseJson.status === 'success'){
                console.log(responseJson);
                this.setState(state => ({
                    data: responseJson.data,
                    refreshing: false
                }));
                console.log('PRINT SUCCESS RESULT OF REFRESH')
                console.log(this.state.data)
            }
        })
        .catch((error)=>{
            console.log('ERROR IN REFRESHING');
            console.log(error)
        })

};

componentDidMount = async () => {    
    this.setState({ isLoading: true });
    const tk = await AsyncStorage.getItem('userToken');
    fetch('MY API LINK /?skip=0&limit=5', {
        method: 'GET',
        headers:{
            'Content-type':'application/json',
            'x-access-token': tk
        }
    })
        .then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson);
            this.setState(state => ({
                data: responseJson.data,
                isLoading: false,
                refreshing: false
            }));
            console.log('PRINT RESULT')
            console.log(this.state.data)
        })
        .catch((error)=>{
            console.log('ERROR');
            console.log(error)
        })
    // this.fetchData()
}

fetchData = async ()=>{
    this.setState({loading: true})
    const tk = await AsyncStorage.getItem('userToken');
    fetch(`MY API LINK /?skip=${this.state.page}&limit5`
    , {
        method: 'GET',
        headers:{
            'Content-type':'application/x-www-form-urlencoded',
            'x-access-token': tk
        }
    }
    ).then((response) => response.json())
    .then((responseJson) => {
        this.setState(state => ({ 
            data: [...state.data, ...responseJson.data], 
            loading: false, 
            // isLoading:false
        }));
    })
    .catch((error) => {
        console.log(error);
    })
}

handleEnd = () => {
    this.setState(state => ({ page: state.page + 1 }), () => this.fetchData());
};

render() {
    return (
        this.state.isLoading ?
            <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                <ActivityIndicator size='large' color={'black'} animating/>
            </View>
        :
        <View style={styles.container}>
            <FlatList
                data={this.state.data}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refreshing}
                        onRefresh={this._onRefresh}
                    />
                }
                keyExtractor={(x, i) => i.toString()}
                onEndReached={() => this.handleEnd()}
                onEndReachedThreshold={0}
                ListFooterComponent={() =>
                this.state.loading ? 
                    null
                    : 
                    <ActivityIndicator size="large" animating />
                }
                renderItem={this.renderItem}
            />
        </View>
    );
}}

Answer 1

我发现了错误，在fetchData函数中，我错过了用于获取所需结果的参数中的'='。

代码现在很棒！希望它能对阅读并想在React Native中使用infin FlatList进行无限滚动的任何人提供帮助

无效尝试在Flatlist React Native中传播不可迭代的实例

1 个答案: