Question

我正在使用具有大量财务形式的React-Native处理Android应用程序。我构建应用程序的方式是我进行API调用以检索主页面上的表单数据，该主页面加载表单并将其存储在this.state.appForm中。然后将表格分成七个不同的页面并呈现给用户。我为每个页面创建了单独的组件。

      render(){
       var pages = []
       pages.push(<FirstPage key="Firstkey" appForm=this.state.appForm/>)
       pages.push(<SecondPage key="Secondkey" appForm=this.state.appForm/>)
       pages.push(<ThirdPage key="Thirdkey" appForm=this.state.appForm/>)
        .
        .
       pages.push(<SevenPage key="Sevenkey" appForm=this.state.appForm/>)  

        return(
        <NavigationBarComponent/> //contains back button, progressBar & save button
          <ScrollView>
             {pages[this.state.page]}
          </ScrollView>
        <ContinueButtonComponent/>
      )}

        onContinue() {
        if (!this.state.isValid) return;
        if (this.state.page == LAST_PAGE) {
          this.onSubmit();
         } else {
          this.setState({page: (this.state.page + 1)});
         }
        }

       onBackPress() {
        if (this.state.page>0){
          this.state.page--
          this.forceUpdate()
        }
       }

页面数组存储所有页面，我递增和递减它以在流程中前进和后退。每个组件都需要用户输入并直接更新appForm。

问题：每当我导航回任何页面时（使用pages--），我登陆的页面的构造函数将再次被调用，这将再次执行constructor和{{1}中的所有计算再次。如何在返回页面时停止调用构造函数？

我检查了这个question的答案，该答案说每个组件都有一个独特的关键支柱，但我已经这样做了。

欢迎任何改进应用程序结构的评论。感谢。

Answer 1

您必须卸载并重新安装组件，以便重新实例化它是正常的。如果页面被渲染一次并切换/转换，你只能避免这种情况，如果你使用的是内置的导航器，则无法绕过它。无论哪种方式，最好调整你的逻辑方式 - 它应该在一个动作/存储中，而不是在构造函数/组件中（尽可能“哑”）。

由于您的商店应该是单身实例，因此不应在不同网页之间进行更改，因此您的操作可能基于条件 - dispatch(doActionIfNotDone)。

为什么在导航回页面时会调用组件构造函数？

1 个答案: