Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Child component not rerender after api call in React Native

$
0
0

I have to create a component which except one props and based on that props child component will call API and fill the dropdown. It works first time but not works in second time. API successfully called and receive the data but data not render inside the dropdown.

Here is the sample,

import React, { Component } from 'react';import {    View,    StyleSheet,    Text,} from 'react-native';import PropTypes from 'prop-types';import { Dropdown } from 'react-native-material-dropdown';import { fillSemester } from './../services/Dropdown';export default class SemesterComponent extends React.PureComponent {    _isMounted = false;    constructor(props) {        super(props);        this.state = {            courseInitalIndex: '',            courseValue: [],            semesterValue: [],            semesterInitalIndex: '',            semesterId: '',            semesterName: '',            semesterNameshort: '',            courseId: '',        };    }    async componentDidUpdate(previousProps, props) {        if (previousProps.courseId !== this.props.courseId) {            this.setState({                semesterValue: []            })            this.getSemester(this.props.courseId, props)        }    }    async getSemester(courseId) {        var ClientId = "1";        var TermTypeId = "2";        var yearid = "1";        const newData = {};        newData.clientid = ClientId;        newData.termtypeid = TermTypeId;        newData.yearid = yearid;        newData.courseid = courseId;        fillSemester(newData).then(async response => {            if (!response.status) {                return;            }            var temp = [];            for (let index = 0; index < response.dropdownlist.length; index++) {                const element = response.dropdownlist[index];                temp.push({                    value: element.text,                    id: element.value,                    shorttext: element.shorttext                });            }            console.log(JSON.stringify(this.state.semesterValue))            if (temp.length > 0) {                this.setState({                    initalIndex: temp[0].value,                });            }            this.setState({                semesterValue: temp            });        });    }    onChangeSemester = (text, index, data) => {        const { onChangeSemester } = this.props;        onChangeSemester(data[index], index);    }    render() {        const { text, onChangeCourse, courseId, } = this.props;        return (<View style={{ marginTop: 20 }}><Text style={{ fontWeight: '700', fontSize: 12 }}>                    SELECT SEMESTER</Text><Dropdown                    dropdownOffset={{ top: 3, left: 0 }}                    rippleCentered={true}                    data={this.state.semesterValue}                    value={this.state.initalIndex}                    pickerStyle={{ marginLeft: 5 }}                    containerStyle={styles.modalDropdown}                    inputContainerStyle={{                        borderBottomColor: 'transparent',                    }}                    onChangeText={this.onChangeSemester}                /></View>        )    }}const styles = StyleSheet.create({    modalDropdown: {        marginTop: 5,        marginBottom: 10,        height: 44,        borderWidth: 0.5,        backgroundColor: 'white',        borderColor: '#a29e9e',        padding: 5,    },})SemesterComponent.propTypes = {    text: PropTypes.string.isRequired,    courseId: PropTypes.string.isRequired,    onChangeSemester: PropTypes.func,}SemesterComponent.defaultProps = {    text: 'Submit',    onChangeSemester: () => { },}

When the course changed i will update the courseId props and call the getSemester method to retrieve the data from the server using fetch. render method not called second time.

Stuck in the task from last 2 days.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>