Content is being replaced instead of appended to in react native during pagination

Question

Below is the main view screen which fetches the data, then gets it to the rendering component. For some reason the content is not being appended but rather replaced by the new 1.

export default class Questions extends React.Component {
constructor(props)
{
    super(props);
    this.state = {
        data:[],
        options_array: [],
        last_id: 0,
        username: '',
        image_url:''
    };

}

loadInitialState = async () => {
    this.state.username = await AsyncStorage.getItem('user'); //This should be tranfered from the login
    this.state.image_url = await AsyncStorage.getItem('image_url');
    this.getData();
};


getData()
{
    return fetch('url.com/endpoint', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            username: this.state.username,
            last_id: this.state.last_id,
            options_array: this.state.options_array
        })
    })

        .then((response) => {
            console.log(response);
            return response.json()
        })
        .then((res) => {
            this.setState({data: res.questions});
            this.setState({last_id:res.last_id});
        })
        .catch((error) => {
            console.error(error);
        });
}


componentDidMount()
{
    this.loadInitialState().done();
}

render()
{
    return (
        <Content>
            <TouchableOpacity onPress={()=>this.props.navigation.navigate("PostQuestion")}>
                <Card transparent>
                    <CardItem>
                    <Left>
                        <Thumbnail small source={{uri: this.state.image_url}} />
                        <Body>
                        <Text style={styles.poster_username}>{this.state.username}</Text>
                        <Text style={styles.moto1}>Help others help you</Text>

                        </Body>
                    </Left>
                    </CardItem>
                </Card>
            </TouchableOpacity>
        <QuestionsData data={this.state.data} navigation = {this.props.navigation}/>
            <Button title='Load' onPress={()=>this.loadInitialState().done()}/>
        </Content>

    );
}

}

Below is where the rendering takes place

export default class QuestionsData extends React.Component { constructor(props) { super(props); this.state = { navigation: null } }

componentDidMount()
{
    this.state.navigation = this.props.navigation;
    console.log(this.props)
}

questionList(props)
{
    return props.data.map(function (questionData, index)
    {
        return renderQuestionContent(questionData, props)
    }
    );
}

render()
{
    return this.questionList(this.props)
}

}

daRula daRula · Accepted Answer · 2018-04-17T22:12:33

I managed to figure it out, i replaced this.setState({data: res.questions}); with this.setState({data: [ ...this.state.data, ...res.questions ]}); and then it worked just fine

Content is being replaced instead of appended to in react native during pagination

1 Answers