链接Github问题: https://github.com/facebook/relay/issues/1218
我们遇到了Relay的奇怪行为。我会尝试尽力解释。
因此我们有一个“主”中继容器,用于获取相应商店的数据,还包括Ticket容器的片段和片段。 故障单容器呈现具有过滤和排序的自定义表。所以你可以看到StoreFrom组件中的StoreTicketList容器导入所有必需的道具都像Store片段一样传递。
当您尝试过滤StoreList Ticket时会出现问题,我的意思是设置过滤器或排序中继变量。 您将收到此错误:
警告:RelayContainer:组件TicketList
使用的变量与用于获取片段Store
的变量不同。片段是使用变量{"first":5,"after":null,"last":null,"before":null,"sort":null,"filter":null}
获取的,但是使用变量{"first":5,"after":null,"last":null,"before":null,"sort":null,"filter":{"authorAccount":{"email":{"__e":"wrongEmail@email.com"}}}}
进行渲染。这可以表明两种可能性之一:
- 父级在查询中设置了正确的变量 - TicketList.getFragment('Store', {...})
- 但在渲染组件时没有传递相同的变量。请务必通过将它们作为props传递给组件来告诉组件使用哪些变量:<TicketList ... first={...} after={...} last={...} before={...} sort={...} filter={...} />
。
- 您故意将虚假数据传递给此组件,在这种情况下忽略此警告。
但是那些过滤器/排序变量在StoreTicketList上并且它们不会从父容器传递到子容器,就像在这种情况下将容器存储到StoreListTicket容器一样。
export class StoreForm extends React.Component {
constructor(props) {
super(props);
const { Viewer: { store } } = props;
this.state = {
number: store && store.number !== null ? store.number : '',
};
}
handleInsert = (model) => {
console.log('Form mutation model : ', model);
};
render() {
const { Viewer, relay: { variables: { update } } } = this.props;
return (
<div>
<Form>
<FormTitle title='Store Info' />
<FormBody>
<TextField
required
fullWidth
name='number'
value={this.state.number}
floatingLabelText='Number'
/>
<StoreTicketList Store={this.props.Viewer.store} />
</FormBody>
</Form>
</div>
);
}
}
StoreForm容器(主容器):
export default Relay.createContainer(StoreForm, {
initialVariables: {
id: null,
update: false
},
prepareVariables({ id = null }) {
return { id, update: (id !== null) };
},
fragments: {
Viewer: (variables) => Relay.QL`
fragment on Viewer {
store(id: $id) @include(if: $update) {
id,
number
${StoreTIcketList.getFragment('Store')}
}
}
`
}
});
票证容器:
export const StoreTicketList = Relay.createContainer(TicketList, {
initialVariables: {
first: 5,
after: null,
last: null,
before: null,
sort: null,
filter: null
},
fragments: {
Store: () => Relay.QL`
fragment on Store {
ticketConnection(first: $first, after: $after, last: $last, before: $before, sort: $sort, filter: $filter) {
count,
pageInfo {
hasNextPage,
hasPreviousPage,
startCursor,
endCursor
},
edges{
node{
created,
subject
}
}
}
}
`
}
});
我们已经构建了自己的连接表HOC组件,为每个容器呈现表。在此组件中,还有使用this.props.relay.setVariables()
的排序和过滤功能。
因此,StoreListTicket呈现为ConnectionTable,它向下传递中继prop对象,如果用户单击表colum头,组件将生成一个排序对象数组。
function connectionTableHOC(ComposedComponent) {
class EnhanceTable extends React.Component {
constructor(props) {
super(props);
}
sortHandler = (sortArray) => {
const { relay, relay: { variables } } = this.props;
relay.setVariables({
first: variables.first || variables.last,
after: null,
last: null,
before: null,
sort: sortArray
});
};
filterHandler = (filterObj) => {
const { relay, relay: { variables } } = this.props;
relay.setVariables({
first: variables.first || variables.last,
after: null,
last: null,
before: null,
filter: filterObj
});
};
render() {
return <ComposedComponent {...this.props} />;
}
}
答案 0 :(得分:6)
事实证明你需要做两个事情:
首先,将道具传递给组件,如Joe Savona所述。我使用的是react-relay-router,所以对我来说这是添加这一行的问题
<Route path="interviews">
<IndexRoute component={InterviewsList} queries={ViewerQuery} />
<Route path=":id" component={InterviewSession} queries={NodeViewerQuery}
render={({ props }) => props ? <InterviewSession {...props} /> : <Loading />}/> // <--- this line
</Route>
其次,您必须将变量的值注入getFragment
函数调用,如下所示:
fragments: {
Viewer: (variables) => Relay.QL`
fragment on Viewer {
store(id: $id) @include(if: $update) {
id,
number
${StoreTIcketList.getFragment('Store', {... variables})} // <---- this thing!
}
}
`
}
请注意,如果您在根查询中使用getFragment
,variables
将是第二个参数:
const NodeViewerQuery = {
node: (component, variables) => Relay.QL`query { // <---- extra "component" argument
node(id: $id) {
${component.getFragment('node', {...variables})}
}
}`,
答案 1 :(得分:0)
看起来父组件(EnhanceTable
)正在为其子组件设置变量(StoreTicketList
)。这意味着当子渲染时它尝试使用默认变量进行渲染,而父进程则获取了一组不同的变量(已排序/已过滤)。解决方案是让EnhanceTable
告诉渲染的组件使用它的排序/过滤器:
function connectionTableHOC(ComposedComponent) {
class EnhanceTable extends React.Component {
...
render() {
return (
<ComposedComponent
{...this.props}
filterVarName={filterValue}
sortVarName={sortValue}
/>
);
}
}
}