Javascript ReactJS Onsen-使用PushPage时刷新子状态

在使用ReactJS开发我们的第一个应用程序时，我遇到了一个状态刷新问题。我们有一个从API读取页面列表的组件。此结果包含页面名称和内容。我们循环遍历结果集，为每个页面创建tappable Ons.ListItem行。onClick触发一个调用pushPage并将细节作为道具传递的函数

所有内容都正确显示，但我注意到，当我更改API服务器的页面内容时，生成的弹出页面不会重新绘制。如果我退出弹出窗口并重新单击列表项，它将显示新内容。如果标题属性以相同的方式更改，列表项本身也会正确地重新绘制

似乎PushPage正在脱离父组件接收到的内容更改的意识，并且好奇是否有人想到了解决这一问题的最佳方法

父列表片段

class MoreLinks extends React.Component {

  pushCustomPage(pageDetail) {

    //Path with refresh issue
    if (pageDetail.LINK_TYPE == "PAGE") {

      this.props.navigator.pushPage({
        component: CustomPage,
        props: { MoreLinksPopPage: this.MoreLinksPopPage, navigator: this.props.navigator, pageDetail: pageDetail }
      });

    }

    if (pageDetail.LINK_TYPE == "LINK" && pageDetail.LINK_URL) {
      window.open(pageDetail.LINK_URL);
    }

  }

  loadCustomPageList(done) {
    const token = localStorage.getItem("AccessToken");
    const eventid = localStorage.getItem("eventID");

    const requestOptions = { token, eventid };
    axios.post(MobileAPI.GetCustomPages(), requestOptions).then(res => {
      const user = res.data;

      if (user.Success) {
        console.log(user);
        this.setState({ customPages: user.Content.Records });
      } else if (user.Error) {
        alert(user.Message);
      } else {
        alert("An unknown error has occured. Please try again.");
      }
    });
    if (done) done();
  }

  componentDidMount() {
    this.loadCustomPageList();

    setInterval(this.loadCustomPageList, 30000);
  }

  render() {
    return (
      <Ons.Page        renderToolbar={(onBackButton = null) => (
        <Ons.Toolbar>

          <div className="center">More</div>
        </Ons.Toolbar>
      )}>

    <Ons.List modifier="locations">

        {this.state.customPages && this.state.customPages.map((doc, index) => (




              <Ons.ListItem tappable={true}
              modifier="chevron"
              key={doc.PAGE_ID}
              className="list-item-container"
              onClick={() => { this.pushCustomPage( this.state.customPages[index]) }}
            >
              <Ons.Row>
                <Ons.Col width="95px">
                  <div className="action-icon">
                    <Ons.Icon icon="fa-question" />
                  </div>
                </Ons.Col>
                <Ons.Col>
                  <div className="name">{doc.PAGE_NAME}</div>
                </Ons.Col>
                <Ons.Col width="40px" />
              </Ons.Row>
            </Ons.ListItem>



        ))}

          </Ons.List>

        </Ons.Page>
    );
  }
}

class CustomPage extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      pageDetail: this.props.pageDetail
    };
  }


  render() {
    return (
      <Ons.Page
        id={"EventDocuments"}
        renderToolbar={(onBackButton = null) => (
          <Ons.Toolbar>
            {onBackButton ? (
              <div className="left">
                <Ons.BackButton onClick={this.props.MoreLinksPopPage} />
              </div>
            ) : null}
            <div className="center">
              {this.state.pageDetail.PAGE_NAME}
            </div>
          </Ons.Toolbar>
        )}
      >



        {this.state.pageDetail.CONTENT.map((doc, index) => (
          <ContentRow
                key={this.state.pageDetail.CONTENT[index].contentID}
                block={this.state.pageDetail.CONTENT[index]}
              />
        ))}



      </Ons.Page>
    );
  }
}

class ContentRow extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      block: this.props.block
    };
  }


  render() {
    return (


      <Ons.ListItem 
      key={this.state.block.docID}


    >
    {this.state.block.Title && (
      <Ons.Row>
        <Ons.Col>
          <strong>{this.state.block.Title}</strong>
        </Ons.Col>
      </Ons.Row>
    )}

    {this.state.block.Image && (
      <Ons.Row>
        <Ons.Col>
        <img alt="ContentRowImage" style={{maxWidth:'100%'}} src={this.state.block.Image} />
        </Ons.Col>
      </Ons.Row>
    )}

    {this.state.block.Description && (
      <Ons.Row>
        <Ons.Col>
          <div dangerouslySetInnerHTML={{ __html:this.state.block.Description}}></div>
        </Ons.Col>
      </Ons.Row>
    )}

    </Ons.ListItem>
    );
  }
}

class MoreLinks扩展React.Component{
pushCustomPage（页面详细信息）{
//存在刷新问题的路径
如果（pageDetail.LINK_TYPE==“PAGE”）{
this.props.navigator.pushPage({
组件：CustomPage，
道具：{morelinksPappage:this.morelinksPappage，导航器：this.props.navigator，pageDetail:pageDetail}
});
}
if（pageDetail.LINK\u TYPE==“LINK”&&pageDetail.LINK\u URL）{
打开（pageDetail.LINK\uURL）；
}
}
加载自定义页面列表（完成）{
const token=localStorage.getItem（“AccessToken”）；
const eventid=localStorage.getItem（“eventid”）；
const requestOptions={token，eventid}；
post（MobileAPI.GetCustomPages（），requestOptions）。然后（res=>{
const user=res.data；
if（user.Success）{
console.log（用户）；
this.setState（{customPages:user.Content.Records}）；
}else if（user.Error）{
警报（user.Message）；
}否则{
警报（“发生未知错误。请重试。”）；
}
});
如果（完成）完成（）；
}
componentDidMount（）{
此参数为.loadCustomPageList（）；
setInterval（this.loadCustomPageList，30000）；
}
render（）{
返回(
(
更多
)}>
{this.state.customPages&&this.state.customPages.map（（文档，索引）=>(
{this.pushCustomPage（this.state.customPages[index]）}
>
{doc.PAGE_NAME}
))}
);
}
}

自定义页面组件

class MoreLinks extends React.Component {

  pushCustomPage(pageDetail) {

    //Path with refresh issue
    if (pageDetail.LINK_TYPE == "PAGE") {

      this.props.navigator.pushPage({
        component: CustomPage,
        props: { MoreLinksPopPage: this.MoreLinksPopPage, navigator: this.props.navigator, pageDetail: pageDetail }
      });

    }

    if (pageDetail.LINK_TYPE == "LINK" && pageDetail.LINK_URL) {
      window.open(pageDetail.LINK_URL);
    }

  }

  loadCustomPageList(done) {
    const token = localStorage.getItem("AccessToken");
    const eventid = localStorage.getItem("eventID");

    const requestOptions = { token, eventid };
    axios.post(MobileAPI.GetCustomPages(), requestOptions).then(res => {
      const user = res.data;

      if (user.Success) {
        console.log(user);
        this.setState({ customPages: user.Content.Records });
      } else if (user.Error) {
        alert(user.Message);
      } else {
        alert("An unknown error has occured. Please try again.");
      }
    });
    if (done) done();
  }

  componentDidMount() {
    this.loadCustomPageList();

    setInterval(this.loadCustomPageList, 30000);
  }

  render() {
    return (
      <Ons.Page        renderToolbar={(onBackButton = null) => (
        <Ons.Toolbar>

          <div className="center">More</div>
        </Ons.Toolbar>
      )}>

    <Ons.List modifier="locations">

        {this.state.customPages && this.state.customPages.map((doc, index) => (




              <Ons.ListItem tappable={true}
              modifier="chevron"
              key={doc.PAGE_ID}
              className="list-item-container"
              onClick={() => { this.pushCustomPage( this.state.customPages[index]) }}
            >
              <Ons.Row>
                <Ons.Col width="95px">
                  <div className="action-icon">
                    <Ons.Icon icon="fa-question" />
                  </div>
                </Ons.Col>
                <Ons.Col>
                  <div className="name">{doc.PAGE_NAME}</div>
                </Ons.Col>
                <Ons.Col width="40px" />
              </Ons.Row>
            </Ons.ListItem>



        ))}

          </Ons.List>

        </Ons.Page>
    );
  }
}

class CustomPage extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      pageDetail: this.props.pageDetail
    };
  }


  render() {
    return (
      <Ons.Page
        id={"EventDocuments"}
        renderToolbar={(onBackButton = null) => (
          <Ons.Toolbar>
            {onBackButton ? (
              <div className="left">
                <Ons.BackButton onClick={this.props.MoreLinksPopPage} />
              </div>
            ) : null}
            <div className="center">
              {this.state.pageDetail.PAGE_NAME}
            </div>
          </Ons.Toolbar>
        )}
      >



        {this.state.pageDetail.CONTENT.map((doc, index) => (
          <ContentRow
                key={this.state.pageDetail.CONTENT[index].contentID}
                block={this.state.pageDetail.CONTENT[index]}
              />
        ))}



      </Ons.Page>
    );
  }
}

class ContentRow extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      block: this.props.block
    };
  }


  render() {
    return (


      <Ons.ListItem 
      key={this.state.block.docID}


    >
    {this.state.block.Title && (
      <Ons.Row>
        <Ons.Col>
          <strong>{this.state.block.Title}</strong>
        </Ons.Col>
      </Ons.Row>
    )}

    {this.state.block.Image && (
      <Ons.Row>
        <Ons.Col>
        <img alt="ContentRowImage" style={{maxWidth:'100%'}} src={this.state.block.Image} />
        </Ons.Col>
      </Ons.Row>
    )}

    {this.state.block.Description && (
      <Ons.Row>
        <Ons.Col>
          <div dangerouslySetInnerHTML={{ __html:this.state.block.Description}}></div>
        </Ons.Col>
      </Ons.Row>
    )}

    </Ons.ListItem>
    );
  }
}

类CustomPage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
pageDetail:this.props.pageDetail
};
}
render（）{
返回(
(
{onBackButton(
)：null}
{this.state.pageDetail.PAGE_NAME}
)}
>
{this.state.pageDetail.CONTENT.map（（文档，索引）=>(
))}
);
}
}

内容行组件

class MoreLinks extends React.Component {

  pushCustomPage(pageDetail) {

    //Path with refresh issue
    if (pageDetail.LINK_TYPE == "PAGE") {

      this.props.navigator.pushPage({
        component: CustomPage,
        props: { MoreLinksPopPage: this.MoreLinksPopPage, navigator: this.props.navigator, pageDetail: pageDetail }
      });

    }

    if (pageDetail.LINK_TYPE == "LINK" && pageDetail.LINK_URL) {
      window.open(pageDetail.LINK_URL);
    }

  }

  loadCustomPageList(done) {
    const token = localStorage.getItem("AccessToken");
    const eventid = localStorage.getItem("eventID");

    const requestOptions = { token, eventid };
    axios.post(MobileAPI.GetCustomPages(), requestOptions).then(res => {
      const user = res.data;

      if (user.Success) {
        console.log(user);
        this.setState({ customPages: user.Content.Records });
      } else if (user.Error) {
        alert(user.Message);
      } else {
        alert("An unknown error has occured. Please try again.");
      }
    });
    if (done) done();
  }

  componentDidMount() {
    this.loadCustomPageList();

    setInterval(this.loadCustomPageList, 30000);
  }

  render() {
    return (
      <Ons.Page        renderToolbar={(onBackButton = null) => (
        <Ons.Toolbar>

          <div className="center">More</div>
        </Ons.Toolbar>
      )}>

    <Ons.List modifier="locations">

        {this.state.customPages && this.state.customPages.map((doc, index) => (




              <Ons.ListItem tappable={true}
              modifier="chevron"
              key={doc.PAGE_ID}
              className="list-item-container"
              onClick={() => { this.pushCustomPage( this.state.customPages[index]) }}
            >
              <Ons.Row>
                <Ons.Col width="95px">
                  <div className="action-icon">
                    <Ons.Icon icon="fa-question" />
                  </div>
                </Ons.Col>
                <Ons.Col>
                  <div className="name">{doc.PAGE_NAME}</div>
                </Ons.Col>
                <Ons.Col width="40px" />
              </Ons.Row>
            </Ons.ListItem>



        ))}

          </Ons.List>

        </Ons.Page>
    );
  }
}

class CustomPage extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      pageDetail: this.props.pageDetail
    };
  }


  render() {
    return (
      <Ons.Page
        id={"EventDocuments"}
        renderToolbar={(onBackButton = null) => (
          <Ons.Toolbar>
            {onBackButton ? (
              <div className="left">
                <Ons.BackButton onClick={this.props.MoreLinksPopPage} />
              </div>
            ) : null}
            <div className="center">
              {this.state.pageDetail.PAGE_NAME}
            </div>
          </Ons.Toolbar>
        )}
      >



        {this.state.pageDetail.CONTENT.map((doc, index) => (
          <ContentRow
                key={this.state.pageDetail.CONTENT[index].contentID}
                block={this.state.pageDetail.CONTENT[index]}
              />
        ))}



      </Ons.Page>
    );
  }
}

class ContentRow extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      block: this.props.block
    };
  }


  render() {
    return (


      <Ons.ListItem 
      key={this.state.block.docID}


    >
    {this.state.block.Title && (
      <Ons.Row>
        <Ons.Col>
          <strong>{this.state.block.Title}</strong>
        </Ons.Col>
      </Ons.Row>
    )}

    {this.state.block.Image && (
      <Ons.Row>
        <Ons.Col>
        <img alt="ContentRowImage" style={{maxWidth:'100%'}} src={this.state.block.Image} />
        </Ons.Col>
      </Ons.Row>
    )}

    {this.state.block.Description && (
      <Ons.Row>
        <Ons.Col>
          <div dangerouslySetInnerHTML={{ __html:this.state.block.Description}}></div>
        </Ons.Col>
      </Ons.Row>
    )}

    </Ons.ListItem>
    );
  }
}

class ContentRow扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
布洛克：这个。道具。布洛克
};
}
render（）{
返回(
{this.state.block.Title&&(
{this.state.block.Title}
)}
{this.state.block.Image&&(
)}
{this.state.block.Description&&(
)}
);
}
}

对于将来遇到这种情况的任何人，我最终在应用程序中实现了redux状态管理。在子页面中引用redux存储允许其内容在状态更改时自动刷新