将状态作为道具传递给反应本机选项卡视图的问题?

Question

我正在使用react-native-tab-view并渲染两个选项卡。

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

但是，我只在子选项卡的componentDidMount接收初始状态。但是，在渲染中，我能够从 API 接收更新的状态。

我怎样才能得到孩子的componentDidMount的最终数据？

这是我的父组件的方式：

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

在我的子选项卡组件中，我没有从 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>
);
}
}

Answer 1

我不知道this.getData()做了什么，但我认为componentDidMount获得初始数据，因为你使用了setState.setState是异步方法，因此在组件DidMount获取状态后状态会发生变化。

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

我希望它有所帮助。

Answer 2

可能是因为 setstate 是异步的，并且在父渲染或子组件确实挂载的下一个事件中，它不显示数据，但在子渲染之后它显示。尝试在父级中的 setstate 后仅使用控制台.log(( 进行回调并检查。