【问题标题】:Access field in graphQL array query dynamically动态访问graphQL数组查询中的字段
【发布时间】:2019-04-06 08:09:03
【问题描述】:

我有以下返回码

return (
  <FlatList
    data={data.groupQuery.entities}
    keyExtractor={(item, index) => index}
    renderItem={
      ({ item }) => {
        return (
          <View style={styles.container}>
            />
            <Text style={styles.label}>Name: {item.fieldName}</Text> // I want to display fieldName value here
          </View>
        )
      }
    }
  />
);

鉴于上述情况,我如何从照片中的查询数组中访问 fieldName 值。我想动态调用该字段。


更新的查询:

对此线程的一些混乱表示歉意。现在我的目标是从下面的照片中访问fieldName 值。我试过{item.fieldTradingPlatform.entity.fieldName},但得到TypeError: Cannot read property 'fieldName' of undefined


上一个查询:

通过静态调用,我可以输出第一个数组的值:

console.log(data.groupQuery.entities[0].fieldName)

【问题讨论】:

  • 上面的代码不行吗?你看到了什么行为?你期望什么行为?您是否在控制台中看到任何错误?
  • 我实际上有 2 个不同的查询... 1> 没有整数数组,{item.fieldName} 输出 fieldName。 2> 我的查询的这个更新版本。所以我想知道如何动态调用这些值。
  • 我担心的是我不确定如何重构代码,以便我可以从该查询中获取 [0] 和 [1] 值。我们应该定义一个索引值吗?那我怎么加呢?
  • FlatList 组件已经为您传递给data 属性的项目数组中的每个项目动态创建了一个视图。每个项目的值在renderItem 函数中可用。您已经根据传入的数组动态呈现了一些视图。如果您的数组中有两个项目,则应该为每个项目呈现一个单独的视图。
  • 再次,从您的问题和您的 cmets 中并不清楚您所期望的 行为 以及您在运行代码时实际看到的内容。您当前的代码没有按预期工作怎么办?

标签: arrays react-native graphql


【解决方案1】:

图形查询数据

尝试这样访问字段名称

renderItem={({ item }) => (
                    <View>
                        {
                            item.fieldTradingPlatform.map((a, i) => {
                                return <Text>{a.entity.fieldName}</Text>
                            })
                        }
                    </View>)}

fieldTradingPlatform 是一个数组而不是单个对象。

【讨论】:

  • 你是天才。非常感谢!
  • 顺便说一句,我在应用程序和控制台 UI Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of CellRenderer. See https://fb.**/react-warning-keys for more information. in View (at PlatformComponent.js:74)&lt;View... of item.fieldTradingPlatform.map((a, i) =&gt; { return ( &lt;View style={styles.container}&gt; 中收到此警告
猜你喜欢
  • 2020-01-30
  • 2018-11-25
  • 2019-02-23
  • 2019-09-13
  • 2020-04-06
  • 2019-06-29
  • 2020-03-15
  • 1970-01-01
  • 2018-11-06
相关资源
最近更新 更多