Relay-Modern FragmentContainer 数据未填充答案

【问题标题】：Relay-Modern FragmentContainer data not populatedRelay-Modern FragmentContainer 数据未填充
【发布时间】：2018-05-15 00:33:55
【问题描述】：

我正在使用 Relay Modern 尝试将数据加载到 FragmentContainer。我正在使用熟悉的 Container (Smart) / Presenter (Dumb) 模式，并且数据没有按预期传递到我的子 Container 中。但是，如果我使用 Relay 的 @relay(mask: false) 指令来查看片段的数据是否被 QueryRenderer 正确加载，片段数据在那里。

我不明白为什么数据没有发送到我的容器。非常感谢任何帮助。

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 没有用其数据呈现？

【问题讨论】：

你有一个 defaultValue 设置为 null 的用户属性？
@IonutAchim 不，我没有。
这个和数据屏蔽有关，检查这个github.com/facebook/relay/issues/2605#issuecomment-454741670

标签： javascript reactjs graphql relaymodern react-relay

【解决方案1】：

假设查询成功，数据需要传递给渲染组件。正如 Relay 现代文档中所述：

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>
        }}
      />
    )
  }
}

然后，您将能够将道具从容器组件（智能）传递到展示组件（哑）。

【讨论】：

【解决方案2】：

您应该检查 QueryRenderer 组件内的渲染函数，如果数据真的来了或有错误。然后，如果数据在那里，您必须通过道具传递用户。我没怎么用过Relay，希望能帮到你

【讨论】：