Javascript 中继现代碎片容器数据未填充

我正在使用Relay Modern尝试将数据加载到

碎片容器中

。我使用的是熟悉的容器（Smart）/Presenter（Dumb）模式，数据没有按预期传递到我的子容器中。但是，如果我使用Relay的

@Relay（mask:false）

指令查看

QueryRenderer

是否正确加载了片段数据，片段数据就在那里

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

ScreenContainer.js

（呈现

QueryRenderer

）：

最后，

NestedFragmentContainer.js

：

/* ScreenPresenter.js */

import NestedFragmentContainer from './NestedFragment';

export default class ScreenPresenter extends Component {
  render() {
    return <NestedFragmentContainer />
  }
}

/* ./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
      }
    }
  `

---

有人知道为什么FragmentContainer没有使用其数据进行渲染吗？

如果数据真的来了或有错误，您应该在QueryRenderer组件中检查render函数。然后，如果数据在那里，你必须通过道具传递给用户。我没有太多地使用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>
        }}
      />
    )
  }
}

render（）{
返回(
{
如果（错误）{
返回{error.message}
}否则如果（道具）{
/*这里是关键部分*/
return
}
回装
}}
/>
)
}
}

---

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

是否将用户道具的默认值设置为null？@IonutAchim否，我没有。这与数据屏蔽有关，请检查此项

Warning: createFragmentContainerSpecResolver: Expected prop `user` 
to be supplied to Relay(NestedFragmentContainer)`, but got 
`undefined`. Pass an explicit `null` if this is intentional.

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