中继在 setVariables 转换期间使用初始变量，而不是“最后一个”变量答案

【问题标题】：Relay uses initial variable during setVariables transition, not "last" variable中继在 setVariables 转换期间使用初始变量，而不是“最后一个”变量
【发布时间】：2016-12-17 01:58:28
【问题描述】：

我有一个页面，其中从 localStorage 加载了一堆文件 id，然后当组件挂载/接收新道具时，它调用setVariables。虽然这有效并且设置了新变量，但在转换期间使用了初始变量的结果，这会导致奇怪的闪烁结果。

为什么 Relay 会在过渡期间给我一些不同的东西？我的期望是 this.props.viewer.files.hits 与之前的调用相同，而 setVariables 正在做它的事情，而不是使用初始变量的结果。

const enhance = compose(
  lifecycle({
    componentDidMount() {
      const { files, relay } = this.props
      if (files.length) {
        relay.setVariables(getCartFilterVariables(files))
      }
    },
  }),
  shouldUpdate((props, nextProps) => {
    if (props.files.length !== nextProps.files.length && nextProps.files.length) {
      props.relay.setVariables(getCartFilterVariables(nextProps.files))
    }

    return true
  })
)

export { CartPage }

export default Relay.createContainer(
  connect(state => state.cart)(enhance(CartPage)), {
    initialVariables: {
      first: 20,
      offset: 0,
      filters: {},
      getFiles: false,
      sort: '',
    },
    fragments: {
      viewer: () => Relay.QL`
        fragment on Root {
          summary {
            aggregations(filters: $filters) {
              project__project_id {
                buckets {
                  case_count
                  doc_count
                  file_size
                  key
                }
              }
              fs { value }
            }
          }
          files {
            hits(first: $first, offset: $offset, filters: $filters, sort: $sort) {
              ${FileTable.getFragment('hits')}
            }
          }
        }
      `,
    },
  }
)

【问题讨论】：

标签： relayjs

【解决方案1】：

啊，我终于想通了。 prepareParams 正在更改值

export const prepareViewerParams = (params, { location: { query } }) => ({
  offset: parseIntParam(query.offset, 0),
  first: parseIntParam(query.first, 20),
  filters: parseJsonParam(query.filters, null), <-- setting filters variable
  sort: query.sort || '',
})


const CartRoute = h(Route, {
  path: '/cart',
  component: CartPage,
  prepareParams: prepareViewerParams, <--updating variable
  queries: viewerQuery,
})

【讨论】：