Question

我是React本机上的新手，我需要解决此问题：我必须请求服务器并获取一些数据，并且服务器的响应同时向我提供了到屏幕A和屏幕B的数据。我试图创建一个呈现MaterialTopTabNavigator（Tab view）的类组件，并在该组件的构造函数中将其称为服务器，然后需要将所有数据从该类组件的状态传递给两个子组件（或至少传递给每个人都需要的数据）

创建标签视图（创建TopTabNavigator的JS文件）

const TabScreen = createMaterialTopTabNavigator(
    {
        'My Screen A':{screen:()=><ScreenA/>},
        'My Screen B':{screen:()=><ScreenB/>}
    })
const App = createStackNavigator({
    TabScreen: {
      screen: TabScreen,
      navigationOptions: {
        headerStyle: {
          backgroundColor: '#1A237E',

        },
        headerTintColor: '#FFFFFF',
        title: 'Formas de pontuar',
      },
    },
  });
const FormasDPontuarContainer = createAppContainer(App);
const config = require('../../config/chaves_e_constantes')
const initialState = {
  combos_instagram:[],
  regras_aplicativo:[],
  regras_instagram:[],
  loading:true
}

类组件（相同的JS文件）

export default class FormasDPontuar extends React.Component{
  constructor(){
    super()
    console.log('construtor de FormasDPontuar')
    this.state = initialState
    this.callApi()
  }
  updateState=(objJSON)=>{
    if(objJSON){
        console.log('objeto: ',JSON.stringify(objJSON))
        this.setState({data_class_a:objJSON.regrasInstagram})
        this.setState({data_class_b:objJSON.regrasAplicativo})
        this.setState({another_data_class_a:objJSON.combos_instagram})
        this.setState({loading:false})
        console.log('navigate to next screen')
        this.navigator &&
      this.navigator.dispatch(
        NavigationActions.navigate({ 'My Screen A':<ScreenA props={this.state}/> })
      )
    }
}
  callApi = ()=>{
    fetch(`${config.base_addr}formas_de_pontuar`, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Authorization':`Bearer ${config.token}`      
      }
    })
    .then((response)=>response.json())
    .then((responseJson)=>{
      return this.updateState(responseJson)
    })
    .catch((error)=>{
      console.log(error)
    })
  }
  render(){
    let ready = this.state.loading
    // return(
    //     <FormasDPontuarContainer/>
    // )
    if(ready){
      return(
        <Loading visible={true}/>  
      )
    }else{
      return(  
        <FormasDPontuarContainer ref={nav => {
          this.navigator = nav;
          }}/>
      )
    }
  }
}

链接到试图解释该问题的图形： https://imgur.com/a/HZGuNnC

将数据从React MaterialTopBarNavigator传递给它的孩子

0 个答案: