Uncaught Invariant Violation: `Relay` 试图渲染一个无效的上下文，这意味着 `Relay` 是在查询渲染器之外渲染的

问题描述

无法找到有关我收到的错误的有用信息。 具有查询渲染器的主文件

import React from 'react';
import environment from '../relay-env';
import { QueryRenderer,graphql } from 'react-relay';
import RepoList from "./RepoList";

const query = graphql`
    query RepoListWrapperQuery ($login:String!) {
        user (login: $login) {
            repositories(orderBy: {field: CREATED_AT,direction: DESC},first:100,privacy: PUBLIC) {
                pageInfo {
                    startCursor
                }
                totalCount
                totalDiskUsage
                ...RepoList_repos
            }
        }
    }
`
interface IProps {
    error: Error | null;
    props: any;
}

const renderQuery = ({error,props}: IProps) => {
    if(error) return <div>Error!</div>;

    if(!props) return <div>Loading...</div>;

    return <div><RepoList /></div>
};

function RepoListWrapper ({login}) {

    return (
        <QueryRenderer
            environment={environment}
            query={query}
            render={renderQuery}
            variables={{login}}
        />
    );
}

export default RepoListWrapper;

带有片段的文件

import React from 'react';
import { createFragmentContainer,graphql } from 'react-relay';

function RepoList(props: any) {

   const renderRepos = () => props.repos.nodes.map(node => <div>{node.name}</div>)

        return(
            <div>
                <ul>
                    {renderRepos()}
                </ul>
            </div>
        )
}

export default createFragmentContainer(RepoList,{
    repos: graphql`
        fragment RepoList_repos on RepositoryConnection {
            nodes {
                createdAt
                isInOrganization
                isPrivate
                name
                primaryLanguage {
                    name
                }
            }
        }
    `,});

这是我得到的错误：

invariant.js:40 Uncaught Invariant Violation: `Relay(RepoList)` tried to render a context that was not valid this means that `Relay(RepoList)` was rendered outside of a query renderer.

我找不到我做错了什么。 如果有人遇到类似的问题，任何需要调查的想法将不胜感激。 如果我摆脱了子组件 RepoList 并将片段从该组件移动到 RepoListWrapper 组件的主查询中 - 一切正常。我正在尝试使用片段。 此 graphql 查询和片段返回正确的 API 响应，已使用 graphiQL 检查，因此 graphQL 本身不是问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）