当继电器取

Question

我使用Reactjs和Relayjs在我的web应用程序查询数据确定。其中一页，我称之为memberList，正在显示在网站上注册的所有用户的列表。

这是我实现的一个简化版本：

render() { 
    {this.props.memberList.edges.length > 0 ? 
    <ol> 
     {this.props.memberList.edges.map(
     (member, i) => { 
      return <li>{member.node.username}</li>; 
     } 
    )} 
    </ol> 
    : <span>No members to show!</span>} 
} 

而且我RelayContainer：

export default Relay.createContainer(MemberList, { 
    fragments: { 
    classroom:() => Relay.QL` 
     fragment on Classroom { 
     id, 
     memberList(first: 100) { 
      edges { 
      node { 
       id, 
       username 
      } 
      } 
     }, 
     } 
    `, 
    }, 
}); 

也能正常工作;它按预期显示教室的所有成员。但是，页面不表现得很，因为我想它：

• 当浏览网页，或刷新时，该<span>呈现短暂的片刻，因为this.props.memberList.edges数组为空。
• 不到一秒钟后，props更新和阵列不再为空。这会导致重新呈现，并且现在会显示带有成员的<ul>列表 - 正如预期的那样。

我想，当继电器读取数据，所以我可以确定memberList是实际上空，或者它的属性还不能确定，因为查询响应挂起就知道了。

这又如何实现呢？我搜索了2个多小时，我只能找到突变的相关答案，这不是我在这里做的。谢谢。

Answer 1

我很惊讶，你的组件是简单渲染span。默认情况下，如果Relay没有完成读取数据，则甚至不应呈现组件。

无论如何，如果你知道那里发生了什么，Relay.Renderer有一个render prop，你可以用它来实现你想要的。以下是一个示例（直接从文档中获取）。

在这个例子中，ErrorComponent和LoadingComponent简单地显示静态错误消息/负载指示器。

<Relay.Renderer 
    Container={ProfilePicture} 
    queryConfig={profileRoute} 
    environment={Relay.Store} 
    render={({done, error, props, retry, stale}) => { 
    if (error) { 
     return <ErrorComponent />; 
    } else if (props) { 
     return <ProfilePicture {...props} />; 
    } else { 
     return <LoadingComponent />; 
    } 
    }} 
/> 

如果您使用Relay.RootContainer，它有一些类似的renderLoading道具。