Question

我在我的网络应用程序中使用了Reactjs和Relayjs。其中一个页面，我称之为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>列表 - 正如预期的那样。

我想知道Relay何时获取数据，以便我可以确定memberList 实际是否为空或者是否为＆＃39;由于查询响应处于待处理状态，因此无法确定属性。

如何实现这一目标？我搜索了超过2个小时，我只能找到突变的相关答案，这不是我在这里做的。感谢。

Answer 1

我很惊讶您的组件正在简要呈现<%@page import="com.mysql.jdbc.Connection"%> <%@page import="com.mysql.jdbc.Statement"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.DriverManager"%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ page import ="java.sql.*" %> <% Connection c1 = null; Statement st = null; ResultSet rs = null; Class.forName("com.mysql.jdbc.Driver"); c1 = (Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/teacher","root", "abcde"); { System.out.println("Couldn't find the driver!"); System.out.println("Couldn't connect: print out a stack trace and exit."); System.out.println("We got an exception while creating a statement:" + "that probably means we're no longer connected."); st = (Statement) c1.createStatement(); System.out.println("Statement Created Successfully"); { System.out.println("We got an exception while creating a statement:" + "that probably means we're no longer connected."); } if (c1!= null) { System. out.println("Hooray! We connected to the database!"); } else { System.out.println("We should never get here."); }} %>。默认情况下，如果Relay尚未完成获取数据，则甚至不应呈现该组件。

无论如何，如果你弄清楚那里发生了什么，span有一个render prop可以用来实现你想要的。这是一个例子（直接来自文档）。

在此示例中，Relay.Renderer和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道具。

确定Relay何时获取查询数据

1 个答案: