传递状态作为 react-native-tab-view 的道具的问题？

Question

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

我在 parent 组件中调用一个 api ，将其保存为 parent 状态，然后传递保存为 prop[=31 的状态=] 到 child 选项卡。

但是，我只在 child 选项卡的 componentDidMount 中收到初始状态。但是，在渲染中我能够从 api.

接收更新的状态

如何获取 child 的 componentDidMount 中的最终数据？

这是我的 parent 组件的方式：

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

在我的 child 选项卡组件中，我没有从 api 接收数据，而是接收初始空数组。

Child 分量：

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是异步的，在parent render或child component did mount的下一个事件中不显示数据，但是在child render中显示。仅使用 console.log() 在父级中设置状态后尝试回调并检查。