3

我正在使用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>
    );
  }
}
4

2 回答 2

1

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

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

我希望它有所帮助。

于 2020-01-31T07:46:01.180 回答
0

可能是因为 setstate 是异步的，并且在父渲染或子组件的下一个事件中确实挂载它不显示数据，但在子渲染之后它显示。在父级设置状态后尝试回调，只需一个 console.log() 并检查。

于 2020-01-31T07:49:13.197 回答