在获取React Native之后渲染组件

Question

我有一个应用程序，提示用户输入代码，它调用外部服务并从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>
    );
  }
}

Answer 1

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

我的“ 肮脏 ”建议是：让App-Component渲染您的着陆页并将状态属性“ 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（） 。

Answer 2

您需要将API调用移至App 。 现在， showLanding是App状态的一部分，但是您要在LandingComponent设置，因此不会触发重新渲染。