Question

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

为什么接力会在过渡期间给我一些不同的东西？我的期望是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')}
            }
          }
        }
      `,
    },
  }
)

Answer 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,
})

Relay在setVariables过渡期间使用初始变量，而不是＆＃34; last＆＃34;变量

1 个答案: