Неверная попытка распространить не повторяемый экземпляр в Flatlist React Native - PullRequest
Новая
       5

Неверная попытка распространить не повторяемый экземпляр в Flatlist React Native

0 голосов
/ 07 февраля 2019

Я пытаюсь выполнить бесконечную загрузку прокрутки с помощью плоского списка, такого как Instagram и Twitter.Нашел вид на YouTube https://www.youtube.com/watch?v=WcGd8VkRc48, который прекрасно работает с этим API и функций.Я применил свою логику к тому же API и работал.Но когда я применяю его к своему API, он выдает мне ошибку «недопустимая попытка распространить не повторяемый экземпляр»

Итак, вот в чем дело.ComponentDidMount () делает выборку отлично и прекрасно работает.Теперь flatlist поставляется с опциями для обновления всего списка или для продолжения загрузки более поздних сообщений, как мы делаем в приложениях Instagram и Timeline.

Обновление всего списка, который является прокруткой вниз, работает отлично.Но когда я достигаю конца списка, я вызываю функцию, которая загружает следующие элементы, но в этот момент появляется ошибка.Это должно быть что-то с массивом объектов, но ранее видео отлично работает точно так же!Пожалуйста, ПОМОГИТЕ 

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>
    );
}}

1 Ответ

0 голосов
/ 07 февраля 2019

Я нашел ошибку, в функции fetchData я пропустил «=» в параметре для получения желаемых результатов.

Код теперь отлично работает!Надеюсь, это поможет любому, кто читает и хочет сделать бесконечную прокрутку с помощью FlatList в React Native

...