Question

我有一个根容器，其中有一些relayVariables：

export default Relay.createContainer(UsageView, {
  initialVariables: {
    start: null,
    end: null,
  },
  fragments: {
    viewer: ({ start, end }) => Relay.QL`
      fragment on viewer {
        ${ProductList.getFragment('viewer', { start, end })}
      }
    `,
  },
});

这些变量传递给ProductList组件并在其片段中使用：

export default Relay.createContainer(Component, {
  initialVariables: {
    start: null,
    end: null,
  },
  fragments: {
    viewer: ({ start, end }) => Relay.QL`
      fragment on viewer {
        id
        organization {
          createdAt
          products (start: $start, end: $end) {
            name
            usageTotal
            ${ProductListItem.getFragment('data', { start, end })}
          }
        }
      }
    `,
  },
});

如您所见，然后将这些传递给另一个组件ProductListItem。

首次加载页面时，所有数据都会被提取，加载和渲染。我有一个下拉列表，允许用户更改开始和结束值，然后在父容器中调用relay.setVariables：

setDateRange = ({ start, end }) => {
  this.props.relay.setVariables({
    start,
    end,
  }, (state) => {
    console.log('READYSTATE CHANGE', state);
  });
}

调用此函数时，onReadyStateChange被调用4次，并显示以下消息序列：

＆＃34; NETWORK_QUERY_START＆＃34;
＆＃34; CACHE_RESTORE_START＆＃34;
＆＃34; CACHE_RESTORE_FAILED＆＃34;
＆＃34; NETWORK_QUERY_RECEIVED_ALL＆＃34;

完成此操作后，开始和结束的值为undefined，导致所有内容中断。

我似乎无法弄清楚为什么会发生这种情况，因为setVariables中设置为开始和结束的值有效。

Answer 1

我意识到我没有正确使用setDateRange函数的输入 - 它被传递了一个JSON字符串，需要进行解析。不幸的是，从转发请求中无法判断这是问题......

在Relay.setVariables之后，变量未定义

1 个答案: