中继现代片段数据为空

{这是继电器现代}

在我的UserQuery.js中，

class UserQuery extends Component {
  render () {
    return (
      <QueryRenderer
      environment={environment}
      query={GetAllUsers}
      render={({err, props}) => {
        if(props){
          return <UserList />
        }

        return <Text>Loading...</Text>
      }
    }/>
    )
  }
}

export default UserQuery;

所以这是调用QueryRenderer的UserQuery的根。 现在userList组件..

class UserList extends Component {
  render () {
    const users = this.props.users
    return (
      <View>
        {this.renderUsers(users)}
      </View>
    )
  }
  renderUsers(users) {
    if(!users) {
      return <Text>No Users</Text>
    }
    return users.edges.map(user=>{
      return <UserItem user={user}/>
    })
  }
}
module.exports = createFragmentContainer(
  UserList,
  graphql`
  fragment userList_users on userEdges {
    node {
      ...userItem_user
    }
  }
  `
)

Userlist片段包含子userItem的信息，即

class UserItem extends React.Component {
  render() {
    const user = this.props.user;
    return (
      <View>
        <Text>{user}</Text>
      </View>
    )
  }
}
module.exports = createFragmentContainer(
  UserItem,
  graphql`
    fragment userItem_user on User {
      username
    }
  `
)

问题是当userList中的console.log（this.props.users）时，它返回Null。 而片段userList = {}

但是，当我通过从UserQuery组件传递this.props.users到儿童而不使用Fragments时，它可以正常工作。

如果任何人都可以用更好的例子来详细说明createFragmentContainer，那将会很棒。 谢谢..

---

我也是新来传达现代，但据我了解，你需要将查询的对象传递给孩子，就像在这个例子中一样：

https://github.com/apollographql/relay-modern-hello-world/blob/master/src/App.js#L32

显然你需要使用data属性，因为它提取了正确的片段

在试图弄清楚我是否可以避免这样做的时候，我偶然发现了这个问题，因为它似乎有点不必要。

---

据推测GetAllUsers是沿着以下GetAllUsers ：

graphql`
  query UserQuery {
    viewer {
      users {
        edges {
          ...userList_users
        }
      }
    }
  }
`

在这种情况下，你想确保UserList获得正确的道具：

class UserQuery extends Component {
  render () {
    return (
      <QueryRenderer
        environment={environment}
        query={GetAllUsers}
        render={({err, props}) => {
          if (props) {
            return <UserList users={ this.props.viewer.users.edges } />
          }

          return <Text>Loading...</Text>
        }}
      />
    )
  }
}

具体来说， UserList fragment userList_users on userEdges期望包含userEdges数组的users prop。

---

I fixed it by changing the UserList fragment 

 fragment userList_user on Viewer {   //removed userEdges
        edges {
          node {  //moved node to the main query
            id
          }
        }
  `
<QueryRenderer
      environment={environment}
      query={graphql`
      query getUsersQuery {
        viewer {
          ...userList_user
        }
      }
    `}
      render={({error, props}) => {
      if(props) return <UserList users={props.viewer}/>
      return <Text style={{marginTop:20}}>Loading...</Text>
    }
    }/>

链接地址: http://www.djcxy.com/p/39133.html

上一篇: Relay Modern fragment data is null

下一篇: Python/Splinter: How to find and select an option on a site?