Question

我有以下设置：

AWS-扩增反应的
的AppSync
创建反应的应用内

并遵循此文档：https://aws.github.io/aws-amplify/media/api_guide#connect

与在doc中一样，渲染它会在返回正确的数据之前为我提供2x undefined数据。这会破坏应用，因为无法访问嵌套字段（在我的示例中，例如getRoom.id）。

组件示例：

export const AppSyncTest = () => (
  <Connect query={graphqlOperation(query)}>
    {({ data: { getRoom } }) => {

      console.log(getRoom); // returns undefined 2x before data is there

      if (!getRoom) { // without this, app breaks
        return 'why? (can even happen if loading is false)';
      }

      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to IntelliFM WebApp</h1>
          </header>
          <p className="App-intro">
            Found room {getRoom.id} with label {getRoom.label} and description{' '}
            {getRoom.description}
          </p>
        </div>
      );
    }}
  </Connect>
);

Answer 1

请参见AWS API LINK

以上链接中的相关代码段：

2.2.8

请注意，Connect组件的内部不仅包含“数据”，还包含“错误”和“加载”。由于这是一个异步请求，因此如果您尝试立即返回数据，它将不会在那里，但是如果您按照上面的示例所示进行操作（假设您的请求当然返回了数据），那么您应该很好。

Answer 2

我遇到了同样的问题，我认为amplify期望开发人员检查响应是否为Ready。我是通过以下方式解决的：

<Connect query={graphqlOperation(someAppSyncQuery)}>
  {this.test}
</Connect>


const test = (appSyncResponseObject: any): any => {
  if (appSyncResponseObject.data == null ||
      appSyncResponseObject.data.getRecords == null) {
      return null;
    } else {
      const records = appSyncResponseObject.data.getRecords;
      return (
        <div>
          <h3>List all records</h3>
          <ul>
            {records.map(
              (records) =>
                (<li key={records.uuid}>{records.context}</li>)
            )
            }
          </ul>
        </div>
      )
    }
}

aws-amplify-react Connect首先返回未定义的数据

2 个答案: