2

我有一些面板 (A) 显示事件列表。面板最初加载 10 个项目。用户可以通过单击按钮加载更多项目。处理由 处理loadmore()。loadmore()还会更新firststate 和 sessionStorage 中的变量 ' 值（我稍后会解释我为什么这样做）。到目前为止，这工作正常。

用户可以单击某个事件并打开一个对话框 (B) 以显示一些事件详细信息。A 和 B 有不同的路线。我正在使用Relay和react-router-relay。一旦用户关闭对话框，面板就会再次显示。

问题：返回面板后显示的事件数等于变量的初始值first，例如10。但是：我希望事件数等于面板中最后显示的事件数。

例如：假设最初显示了 10 个项目。然后用户点击加载更多，然后显示 20 个项目。按预期工作。然后用户打开和关闭对话框，然后返回面板。该面板仅显示 10 个项目，但没有像我预期的那样显示 20 个（至少作为用户），并且用户必须再次手动加载更多项目。

这是我的设置：

class Panel extends React.Component {

 componentDidMount () {
   const first = // return stored value for first, e.g. from sessionStorage
   let stateUpdate = { first : first }
   let relayVariables = { first : first }

   this.setState(stateUpdate, () => {
     this.props.relay.setVariables(relayVariables)
   })
 }   

 loadmore = () => {
   this.setState({
     first: this.props.relay.variables.first + 10
   }, () => {
     this.props.relay.setVariables({
       first: this.state.first
     }, () => {
       ... update value for first, e.g. in sessionStorage
     })
   })
 }
}

export const PanelContainer = Relay.createContainer(Panel, {
  initialVariables: initialVariables,
  fragments: {
    mandant: () => Relay.QL`
      fragment on SomeType {
        id
        events (first: $first) {
          ...
        }
      }
    `
  }
}

目标：正如我所说，我希望显示相同数量的事件。

想法1：最初的想法是将first的值存储在sessionStorage中，并在componentDidMount. 不幸的是，这不起作用。即使使用relayVariables = { first : 20 }in componentDidMount，也只显示 10 个事件。

想法 2：我可以使用 , 而不是setVariables()我可以使用forceFetch()，但这意味着一旦用户返回面板，Relay 会再次重新加载所有项目。这没有多大意义，因为数据已经物理加载到 Relay 上，再次加载它有点愚蠢。

任何人都可以提供有关如何解决此问题的想法吗？

4

0 回答 0