我使用Relay Modern尝试将数据加载到FragmentContainer
。我使用熟悉的Container(Smart)/ Presenter(Dumb)模式,数据没有按预期传递到我的子容器中。但是,如果我使用Relay的@relay(mask: false)
指令来查看片段的数据是否由QueryRenderer
正确加载,片段数据是。< / p>
我不明白为什么没有将数据发送到我的Container。非常感谢任何帮助。
ScreenContainer.js
(呈现QueryRenderer
):
/* ScreenContainer.js */
import ScreenPresenter from './ScreenPreseenter';
const query = graphql`
query ScreenContainerQuery($id: ID!) {
viewer {
User(id: $id) {
id
...NestedFragmentContainer_user
}
}
}`
export default class ScreenContainer extends Component {
render() {
<QueryRenderer
query={query}
variables={{id: id}}
render={() => <ScreenPresenter />}
/>
}
}
ScreenPresenter.js
:
/* ScreenPresenter.js */
import NestedFragmentContainer from './NestedFragment';
export default class ScreenPresenter extends Component {
render() {
return <NestedFragmentContainer />
}
}
最后,NestedFragmentContainer.js
:
/* ./NestedFragmentContainer.js */
class NestedFragmentContainer extends Component {
render() {
const { user } = this.props;
console.log(user); // <-- Always null, not undefined
return <Text>{user.account.name}</Text>;
}
}
export default createFragmentContainer(
NestedFragmentContainer,
graphql`
fragment NestedFragmentContainer_user on User {
account {
name
}
}
`
此外,每当NestedFragmentContainer
呈现时,我都会看到user
道具为undefined
的错误。但是,console.log()
显示其值实际上是null
,而不是undefined
。
Warning: createFragmentContainerSpecResolver: Expected prop `user`
to be supplied to Relay(NestedFragmentContainer)`, but got
`undefined`. Pass an explicit `null` if this is intentional.
有没有人知道为什么FragmentContainer没有用它的数据进行渲染?
答案 0 :(得分:1)
假设查询成功,则需要将数据传递给呈现的组件。正如接力现代文档中所述:
QueryRenderer是中继树的根。它接受查询,获取数据并使用数据调用渲染回调。
在您的情况下,queryRenderer
应如下所示:
render() {
return (
<QueryRenderer
environment={environment}
query={query}
variables={{id: id}}
render={({error, props}) => {
if (error) {
return <div>{error.message}</div>
} else if (props) {
/* Here is the crucial part */
return < ScreenPresenter data={props.viewer} />
}
return <div>Loading</div>
}}
/>
)
}
}
然后你就可以将道具从容器组件(智能)传递到演示组(哑)。
答案 1 :(得分:0)
如果数据实际到达或出现错误,您应该检查QueryRenderer组件内的render函数。然后,如果数据存在,则必须通过道具传递用户。我没有太多使用Relay,但我希望这可以帮助