0

我有这个带有自动完成搜索表单的测试中继启动工具包项目，该表单向浏览器呈现引号。当我使用搜索表单时，我在浏览器中收到错误消息“app.js:8284 Uncaught TypeError: Cannot read property 'edges' of undefined”。我不明白为什么它第一次填充搜索字段而不是在搜索表单中输入。值得注意的是，如果您对 searchTerm 变量进行硬编码，它将呈现搜索结果。换句话说，它可以在硬编码时读取边缘。对此的任何指导都会很棒。谢谢。

架构在这里 这是搜索词的有效 graphql 查询不会呈现到的组件。

    import React from 'react';
    import Relay from 'react-relay';
    import { debounce } from 'lodash';
    import SearchForm from '../search-form';
    import Quote from '../quote';

    class App extends React.Component {
        constructor(props) {
        super(props)
        this.search = debounce(this.search.bind(this), 300)
      }
      search(searchTerm) {
        this.props.relay.setVariables({ searchTerm });
      }

      render() {
        return (
          <div className="quotes-library">
            <SearchForm searchAction={this.search} />
            <div className="quotes-list">
              {this.props.viewer.quotes.edges.map(edge =>
                <Quote key={edge.node.id} quote={edge.node} />
              )}
            </div>
          </div>
        )
      }
    }

    export default Relay.createContainer(App, {
      initialVariables: {
        searchTerm: '',
      },
      fragments: {
        viewer: () => Relay.QL`
          fragment on User {
                quotes(first:100, searchTerm: $searchTerm) {
                    edges {
                        node {
                            id
                            ${Quote.getFragment('quote')}
                        }
                    }
                }
            }
        `,
      },
    });

更新：这是 Chrome DevTools 网络选项卡中显示的查询。请注意，正在查询搜索表单的“p”输入。

    query App_ViewerRelayQL($id_0:ID!) {
  node(id:$id_0) {
    ...F2
  }
}
fragment F0 on Quote {
  id,
  likesCount
}
fragment F1 on Quote {
  text,
  author,
  id,
  ...F0
}
fragment F2 on User {
  _quotes3UfnML:quotes(first:100,searchTerm:"pri") {
    edges {
      node {
        id,
        ...F1
      },
      cursor
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  },
  id
}

将 console.log 添加到 render() 会显示 searchTerm 输入：

 app.js:17
   {
    "viewer": {
        "__dataID__": "VXNlcjox",
        "__status__": 4
    },
    "relay": {
        "pendingVariables": null,
        "route": {
            "name": "AppHomeRoute",
            "params": {},
            "queries": {}
        },
        "variables": {
            "searchTerm": "pri"
        }
    }
}

app.js 的第 24 行出现以下错误，即{this.props.library.quotes.edges.map(edge => <Quote key={edge.node.id} quote={edge.node} /> )}：

app.js:8285 Uncaught TypeError: Cannot read property 'edges' of undefined
    at App.render (app.js:8285)
    at app.js:43197
    at measureLifeCyclePerf (app.js:42476)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:43196)
    at ReactCompositeComponentWrapper._renderValidatedComponent (app.js:43223)
    at ReactCompositeComponentWrapper._updateRenderedComponent (app.js:43147)
    at ReactCompositeComponentWrapper._performComponentUpdate (app.js:43125)
    at ReactCompositeComponentWrapper.updateComponent (app.js:43046)
    at ReactCompositeComponentWrapper.receiveComponent (app.js:42948)
    at Object.receiveComponent (app.js:35341)

更新 2：

所以检查一下。我的 { ObjectID } 有问题。我从数据库中提取了一个用户并引用，并且对象上有一个“_id”但没有“id”属性。这是输出：

 > db.users.find({})
{ "_id" : ObjectId("586253169465191cb812066c"), "name" : "me", "id" : ObjectId("586253169465191cb812066c"), "errors" : [ ] }
> db.quotes.find({})
{ "_id" : ObjectId("586693333ff93f3581c0ca05"), "text" : "Hi Prisc", "author" : "H. Jackson Brown", "likesCount" : 24 }
{ "_id" : ObjectId("586693333ff93f3581c0ca06"), "text" : "If opportunity doesn't knock, build a door", "author" : "Milton Berle", "likesCount" : 2 }
{ "_id" : ObjectId("586693333ff93f3581c0ca07"), "text" : "Try to be a rainbow in...", "author" : "Maya Angelou" }

如果我从 globalIdFetcher() 记录 id，Jackson Brown Quote 对象的记录 id 会按预期显示两个 id，但它们与数据库中的相同和不同。控制台中的输出是：

{
    "viewer": {
        "__dataID__": "VXNlcjo=",
        "quotes": {
            "__dataID__": "client:6068631311_first(100),searchTerm()",
            "edges": [
                {
                    "__dataID__": "client:client:6068631311:UXVvdGU6NTg2NjkzMzMzZmY5M2YzNTgxYzBjYTA1",
                    "node": {
                        "__dataID__": "UXVvdGU6NTg2NjkzMzMzZmY5M2YzNTgxYzBjYTA1",
                        "id": "UXVvdGU6NTg2NjkzMzMzZmY5M2YzNTgxYzBjYTA1",
                        "__fragments__": {
                            "1::client": [
                                {
                                    "showLikes": false
                                }
                            ]
                        }
                    }
                },

有关修复此语法的任何想法？

4

2 回答 2

0

使用所提供的信息很难解决问题。当您要求指导时，这是我的建议:)

我不明白为什么它第一次填充搜索字段而不是在搜索表单中输入。

因为 Relay 获取 的初始值的结果，searchTerm在您的情况下这是一个空字符串。searchTerm您必须在服务器端（通过检查输入）和客户端（例如通过检查当前值是否searchTerm为空）来处理这种情况。

当您在搜索表单中键入时，search()不会调用并且searchTerm不会更新。检查SearchForm组件。

当我使用搜索表单时，我在浏览器中收到错误消息“app.js:8284 Uncaught TypeError: Cannot read property 'edges' of undefined”。

开始调试服务端为GraphQL 对象类型quotes下的字段返回的内容。您的架构中viewer的输出是什么？db.collection('quotes').find(findParams).toArray()另外，在类console.log(JSON.stringify(this.props, null, 4))的render()函数中放一个App。检查你所看到的。您还可以在 Chrome DevTools Network 选项卡上检查 HTTP 请求和响应。按 过滤graphql。

于 2017-01-17T19:29:19.157 回答
0

解决方案是从 nodeInterface 中取出 Quote 类型，因此仅通过 nodeInterface 运行顶级对象，让中继根据单个 itemType 中定义的 GraphQLID 或 fromGlobalId 生成 objectId 的 id。

于 2017-03-30T13:02:27.503 回答