Javascript 将状态作为道具传递到本机选项卡视图时出现问题？

我正在使用

react native tab view

并呈现两个选项卡

我在父组件中调用api，将其保存到父状态，然后将保存为prop的状态传递到子选项卡

但是，我只在子选项卡的

componentDidMount

中接收初始状态。但是，在渲染中，我能够从api接收更新的状态

如何获取子级的

组件didmount

中的最终数据

下面是我的父组件的工作方式：

class Parent extends Component {
  state = {
    index: 0,
    data: [],
    routes: [{ key: 'tab1', title: 'Tab 1' }, { key: 'tab2', title: 'Tab 2' }],
  };

  componentDidMount() {
    this.getData();
  }

  getStudentList = async () => {
    axios
      .get('/api-url')
      .then(function(response) {
        // saving data to state
        this.setState({ data: response.data });
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  };

  renderScene = ({ route }) => {
    switch (route.key) {
      case 'tab1':
        return <Tab1 data={this.state.data} />; // passing data as data prop
      case 'tab2':
        return <Tab1 data={this.state.data} />;
      default:
        return null;
    }
  };

  handleIndexChange = index => {
    this.setState({ index });
  };

  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={this.renderScene}
        renderTabBar={props => <TabBar {...props} />}
        onIndexChange={this.handleIndexChange}
      />
    );
  }
}

类父级扩展组件{
状态={
索引：0，
数据：[]，
路由：[{key:'tab1'，title:'tab1'}，{key:'tab2'，title:'tab2'}]，
};
componentDidMount（）{
这是getData（）；
}
getStudentList=async（）=>{
axios
.get（“/api url”）
.然后（功能（响应）{
//将数据保存到状态
this.setState（{data:response.data}）；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
});
};
renderScene=（{route}）=>{
道岔（进路钥匙）{
案例“表1”：
return；//将数据作为数据属性传递
案例“表2”：
返回；
违约：
返回null；
}
};
handleIndexChange=索引=>{
this.setState（{index}）；
};
render（）{
返回(
}
onIndexChange={this.handleIndexChange}
/>
);
}
}

在我的子选项卡组件中，我接收的不是来自api的数据，而是初始的空数组

子组件：

class Tab1 extends React.Component {
  componentDidMount() {
    console.log(this.props.data); // Logs out []
  }

  render() {
    console.log(this.props.data); // gives the api data
    return (
      <SafeAreaView style={styles.container}>
        <Text>Child</Text>
      </SafeAreaView>
    );
  }
}

类Tab1扩展了React.Component{
componentDidMount（）{
console.log（this.props.data）；//注销[]
}
render（）{
console.log（this.props.data）；//提供api数据
返回(
小孩
);
}
}

我不知道

这个.getData（）做了什么，但我认为
componentDidMount
获取初始数据，因为您使用了
设置状态。
setState
是一种异步方法，所以在componentDidMount获取状态后状态会发生变化

使用
componentdiddupdate
怎么样？我认为它会起作用，因为它是在渲染和更新之后开始的

我希望它能有所帮助。
可能是因为setstate是异步的，在父渲染或子组件装载的下一个事件中，它不会显示数据，但在子渲染之后会显示数据。使用console.log（）在父级中设置state后尝试回调并检查
 this.getData只是一个api调用。当setState出现时，应该有某种方法重新呈现选项卡，以便在重新呈现组件后可以获得新状态。尽管如此，CDU仍然有效。@vikrantnegi007我知道，重新渲染与componentDidmount无关
componentDidmount
当页面第一次呈现时只需调用一次。重新渲染不调用ComponentDidMount我认为您是正确的。无论如何，我认为componentDidUpdate可以工作。我将尝试让它与CDU一起工作，并在完成后标记此答案。谢谢各位。我可以访问renderScene中的新数据，但我认为选项卡在设置状态后不会重新呈现。如果您的想法是正确的，则默认情况下，每次出现状态更改时，react都会呈现。“渲染应该是纯状态和道具函数”。因此，问题在于编写代码的方式。让我再查一下