Render component after fetch React Native

Question

I have an app where a user is prompted to enter a code, it calls an external service and returns data from the api. Currently I'm able to enter the code and call the api and get a response back, I can also poll it every 10 seconds and return the data (no sockets on api service).

I have two components, showLanding and showResult. When the app initialises, I want to show showLanding, prompt for a code and return showResult.

The problem I'm having is I'm not able to get it to 'update' the view.

I have tried ReactDOM.render or render() within the getScreen function, I feel as though I've missed something glaringly obvious when reading the React Native doco.

export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {showLanding: true, showResult: false}
  }

  render() {
    if (this.state.showLanding) {
      return (
        <View 
        tapCode={this.state.tapCode}
        style={styles.appContainer}>
        {this.state.showLanding && <LandingComponent/>}
        </View>
      );
    }
    if (this.state.showResult) {
      return (
        <View 
        tapCode={this.state.tapCode}
        style={styles.appContainer}>
         {this.state.showResult && <ResultComponent/>}
        </View>
      );
    }
  }
}

export class LandingComponent extends React.Component {

  getResult = (value) => {
    this.state = {
      tapCode: value.tapcode
    }
    console.log(this.state);
    this.getScreen(this.state.tapCode);
  }

  getScreen = (tapcode) => {
    setInterval(() => (
      fetch('https://mywebservice.com/' + this.state.tapCode)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .then(this.state = {
        showLanding: false,
        showResult: true,
        tapCode: tapcode,
        resultResponse: this.responseJson
      })
      .catch((error) => {
        console.error(error);
      })
    ), 10000);
  }

  render() {
    return (
      <View style={styles.landingContainer}>
        landing view, prompt for code
      </View>
    );
  }
}

export class ResultComponent extends React.Component {
  render() {
    return (
      <View style={styles.resultContainer}>
        Show json output
      </View>
    );
  }
}

You're trying to update the App component states in LandingComponent component, so the state of App will not be updated and the component won't re-render. — Majid Amiri
– Majid Amiri, Commented Dec 5, 2018 at 13:06

Mukeyii · Accepted Answer · 2018-12-05 14:09:29Z

There are plenty solutions, but you should definitely consider using a navigation library like react-navigation or react-native-router-flux to handle routing transitions between components.

My "dirty" suggestion would be: Let the App-Component render your Landing-Page and put the state property 'showResults' in there. Show the code-input if showResult is false, if not, show results.

export class LandingComponent extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      showResults: false,
      tapcode: null,
      resultResponse
    }

  getResult = (value) => {
    this.setState({tapCode: value.tapcode})
    this.getScreen(this.state.tapCode);
  }

  getScreen = (tapcode) => {
    setInterval(() => (
      fetch('https://mywebservice.com/' + this.state.tapCode)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .then(function(res) {
         this.setState({
         showResult: true,
         tapCode: tapcode,
         resultResponse: res.json()})
         return res;
       })
      .catch((error) => {
        console.error(error);
      })
    ), 10000);
  }

  render() {
    return (
      this.state.showResults ? <ResultComponent/> :
      <View style={styles.landingContainer}>
        call fetch here....
      </View>
    );
  }
}

And please never mutate your state directly! Call setState() instead.

Colin Burke · Accepted Answer · 2018-12-05 12:53:47Z

0

You need to move the API call up to App. Right now, showLanding is part of the App's state, but you're setting in the LandingComponent so you're not triggering a re-render.

answered Dec 5, 2018 at 12:53

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Collectives™ on Stack Overflow

Render component after fetch React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related