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

Question

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

一切显示正确，但是我注意到当我更改API服务器的页面内容时，结果弹出页面不会重新绘制。如果我退出弹出窗口并重新单击列表项，则它将显示新内容。如果title属性以相同的方式更改，则列表项本身也可以正确重绘。

似乎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>
    );
  }
}

CustomPage组件

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

ContentRow组件

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

Answer 1

对于以后遇到此问题的任何人，我都会在应用程序中实现redux状态管理。在子页面中引用redux存储，允许其内容在状态更改时自动刷新。