在获取React Native之后渲染组件

时间:2018-12-05 12:49:01

标签: javascript reactjs react-native

我有一个应用程序,提示用户输入代码,它调用外部服务并从api返回数据。目前,我可以输入代码并调用api并获得响应,我还可以每10秒轮询一次并返回数据(api服务上没有套接字)。

我有两个组件,showLanding和showResult。 应用初始化时,我想显示showLanding,提示输入代码并返回showResult。

我遇到的问题是我无法获取它来“更新”视图。

我已经在getScreen函数中尝试了ReactDOM.render或render(),我觉得在阅读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>
    );
  }
}

2 个答案:

答案 0 :(得分:3)

有很多解决方案,但是您绝对应该考虑使用react-navigationreact-native-router-flux之类的导航库来处理组件之间的路由转换。

我的“ ”建议是:让应用程序组件呈现您的着陆页,并将状态属性“ showResults”放入其中。如果showResult为false,则显示代码输入;否则,显示结果。

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

并且请勿直接更改您的状态!请致电setState()

答案 1 :(得分:0)

您需要将API调用上移至App。目前,showLandingApp状态的一部分,但是您正在LandingComponent中进行设置,因此您不会触发重新渲染。