reactjs 如何在componentdidMount后再次呈现应用程序屏幕

i2byvkas 于 2023-02-15 发布在 React

关注(0)|答案(4)|浏览(136)

我的react原生应用程序中有3个屏幕：
1.设置-[button ()=>this.props.navigation.navigate("Payments) ]
1.付款-在此屏幕中，我使用componentDidMount从API获取数据，并且API发送回信用卡信息，该信息将在屏幕中呈现，如果没有数据返回[Button ()=>this.props.navigation.navigate("Add Credit Card")
1.添加信用卡：在此屏幕中，用户添加信用卡并将其发送到服务器，然后返回到"付款"屏幕。
问题是这样的：
当我从屏幕1转到屏幕2时（2在componentDidMount中呈现并执行API调用），但当我从屏幕3返回到屏幕2时（2在componentDidMount中不呈现也不执行任何API调用）
为了呈现新添加的信用卡，我需要从屏幕3转到屏幕1，然后转到屏幕2。
如何渲染屏幕2？
这是我的屏幕2组件DidMount：

componentDidMount() {
    this.setState({ ...this.state, activity: true });
    Axios.get(GETCARDLIST_API, {
      headers: {
        appversion: 1.4,
        apisecret: this.props.api_secret
      }
    })
      .then(response => {
        this.setState({ ...this.state, activity: false });
        if (response.status == 200 && response.data.cards != null) {
          this.setState({
            ...this.state,
            showCards: true,
            cards: response.data.cards,
            isCardPresent: true
            //numberOfCards: response.data.cards.length
          });
        } else {

        }
        console.log(response);
      })
      .catch(error => {
        console.log({ error });
        this.setState({ ...this.state, activity: false });
        Alert.alert("Support", error.response.data.error);
      });
  }

我正在使用Stack Navigator在屏幕之间切换。

reactjs

来源：https://stackoverflow.com/questions/60499937/how-can-i-render-app-screen-again-after-componentdidmount

4条答案

按热度按时间

k75qkfdt1#

您可以在第二个屏幕聚焦时侦听，调用API并呈现内容：

componentDidMount() {
  this.listener = this.props.navigation.addListener('didFocus', this.getData)
}

componentWillUnmout() {
  this.listener.remove();
}

getData = () => {
 this.setState({ ...this.state, activity: true });
    Axios.get(GETCARDLIST_API, {
      headers: {
        appversion: 1.4,
        apisecret: this.props.api_secret
      }
    })
      .then(response => {
        this.setState({ ...this.state, activity: false });
        if (response.status == 200 && response.data.cards != null) {
          this.setState({
            ...this.state,
            showCards: true,
            cards: response.data.cards,
            isCardPresent: true
            //numberOfCards: response.data.cards.length
          });
        } else {

        }
        console.log(response);
      })
      .catch(error => {
        console.log({ error });
        this.setState({ ...this.state, activity: false });
        Alert.alert("Support", error.response.data.error);
      });
}

赞(0）回复(0）举报 2023-02-15

m4pnthwp2#

您可以使用卸载非活动路由属性：

const stackNavigator = createStackNavigator(
  {
    stack1: {
      screen: Somescreen,
    },
    stack2: {
      screen: Somescreen2,
    },
  },
  {
    headerMode: 'none', 
    initialRouteName: 'stack1', 
    unmountInactiveRoutes: true,
  },
);

赞(0）回复(0）举报 2023-02-15

mepcadol3#

componentDidMount（）。一旦我们所有的子元素和组件示例都被挂载到本地UI上，这个方法就被调用，并且它只被调用一次。（运行初始获取）
如果您需要再次获取，您应该使用componentDidUpdate，如下所示

componentDidUpdate(prevProps,prevState) {
     if (prevProps.params.id !== this.props.params.id) {
       // functon
     }
   }

或者调用构造函数中的函数，如下所示

constructor(props) {
    super(props)
    this.state = {

    };
    this.navigationWillFocusListener = props.navigation.addListener('willFocus', async ()=> {
      // fetch()
    });
  }

尽管怀疑吧

赞(0）回复(0）举报 2023-02-15

0pizxfdo4#

您的API调用是Async函数，componentdidMount调用您的API，但您的呈现函数在API结果响应之前调用。如果您在componentdidMount函数和呈现函数（视图）上放置断点，您将看到这些函数的工作。