Проблема с передачей состояния как prop-to-native-tab-view?

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 - это асинхронный метод, поэтому состояния меняются после получения компонентов componentDidMount.

Как насчет использования componentDidUpdate? Я думаю, что это будет работать, потому что он запускается после рендеринга и обновления.

Надеюсь, это поможет.

Answer 2

Может быть потому, что setstate является асинхронным, и при следующем монтировании родительского рендера или дочернего компонента он не показывает данные, но после этого в дочернем рендере он показывает. Попробуйте callback после setstate в parent только с console.log () и проверьте.