Question

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

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

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

例如：让我们说最初显示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 ：最初的想法是在sessionStorage中存储first的值，并在componentDidMount中处理它。不幸的是，这不起作用。即使relayVariables = { first : 20 }中有componentDidMount，也只会显示10个事件。

创意2 ：我可以使用setVariables()代替forceFetch()，但这意味着一旦用户返回面板，Relay会重新加载所有项目。它没有多大意义，因为数据已经在Relay上物理加载并再次加载它是一种愚蠢的行为。

任何人都可以帮忙解决一下如何解决这个问题吗？

如何缓存已加载的数据并存储在Relay中？

0 个答案: