Question

我正试图重用组件，因为我只需要更改数据。

我有一个包含可重用组件的主要组件。应该根据所选按钮更改可重复使用组件的状态。

...
renderReusable() {
    switch (this.state.selectedButton) {
      case 'Test1':
        return <ReusableComp status="Test1" />;
      case 'Test2':
        return <ReusableComp status="Test2" />;
      default:
        break;
    }
  }
...
<View style={{ flex: 1 }}>
    <View style={styles.container}>
        <Button
           primary bordered style={styles.topButtoon}
           onPress={() => this.setState({ selectedButton: 'Test1' })}
        >
            <Text>Test1</Text>
        </Button>
        <Button
            primary bordered style={styles.topButtoon}
            onPress={() => this.setState({ selectedButton: 'Test2' })}
        >
            {this.showSelected('closed')}
            <Text>Test2</Text>
        </Button>
    </View>
    {this.renderReusable()}
</View>

然后，在我的可重用组件中，我根据props.status获取数据

constructor(props) {
    super(props);
    this.state = {
      myData: [],
    };
  }

  componentDidMount() {
    this.getMyData();
  }

  getMyData = async () => {
    if (this.props.status === 'Test1') {
      await this.props.getTest1();
    } else if (this.props.status === 'Test2') {
      await this.props.getTest2();
    }
    this.setState({
      myData: this.props.data
    });
  };
...
CREATE THE RENDER()
...

我正在使用redux来获取数据，并且工作正常。我的问题是，当我单击按钮Test2或按钮Test1时，未调用可重用组件中的componentDidMount，因此它不调用获取数据的方法。是否有意义？

Answer 1

是的。

componentDidMount仅在首次安装组件时被调用。

在这种情况下，您必须使用完全符合您需要的componentDidUpdate：检测到新数据到来并使您的组件意识到这一点。

componentDidUpdate=(prevProps)=>{
    if(prevProps!==this.props) this.getMyData()
}

如您所见，您必须与以前的组件一起控制组件的当前道具，如果它们不同，请更新状态，否则，什么也不做。

要始终将检查放在componentDidUpdate内，因为它里面的setState会再次触发它，从而导致无限循环。

希望这可以帮助您解决问题！

反应本机重用组件问题，而未调用componentDidMount

1 个答案: