Question

我正在尝试将数据放入清单中，以使其对于本机移动应用程序看起来不错。 item.abc.b部分似乎引发未找到对象的错误。你能解释我哪里错了吗？数据看起来像这样：

<GridView
             text='How are you feeling?'
             feelings= {[
              {
                "node": {
                  "checkinElement": "Angry",
                  "checkinElementId": "3157"
                }
              },
              {
                "node": {
                  "checkinElement": "Scared",
                  "checkinElementId": "3158"
                }
              },
              {
                "node": {
                  "checkinElement": "Sad",
                  "checkinElementId": "3159"
                }
              }
                          ]}
             columns='3'
             selected={this.state.selected}/>
   The way FlatList is being used:
  `
</View>

           <FlatList
           data:  this.props.feelings,
           renderItem={ ({item})  =>  
                            (<View style {styles.GridViewBlockStyle} 
                         onPress={this._updateSelected.bind(this,item)}>
                                                   <Text style= 
     {styles.GridViewInsideTextItemStyle}>

          {item.node.checkinElement}//this line is giving out error
                                                   </Text>
                                       </View>)
                                   }
          // customisable #columns in each grid
          numColumns={this.props.columns}
          />
      </View>

Answer 1

假设正确提供了数据，并且还定义了样式，则解决方案可能很简单，只需在(箭头函数周围添加)和renderItem。参见下面我在其中添加括号的位置：

</View>
    <FlatList
      data: this.props.feelings,
      renderItem={ ({item}) => 
          (<View style={styles.GridViewBlockStyle}> /* <-- Add ( here */
            <Text style={styles.GridViewInsideTextItemStyle}>        
                {{item.node.checkinElement}} /* <-- Add extra { and } */
            </Text>
           </View>) /* <-- Add ) here */
      }
      keyExtractor={item => item.checkinElementId}
      numColumns={this.props.columns} />
</View>

通过如上所述添加(和)，这意味着“（和）之间的所有内容均作为箭头函数的结果返回”。这简直是等价的：

({ item }) => {
    return (<View> ... </View>)
}

有关更多信息，请参见Advanced Syntax example on MDN中的箭头功能

Answer 2

问题出在您的数据上。您正在将数组传递给对象。因此，它将产生一个问题。

您的感受数据应为：

   <FlatList
                data={data}
                renderItem={({ item }) =>
                    (<Text> {item.node.checkinElement}</Text>)
                }                  
            />

您已将数组设置为不带键的对象。因此，Flatlist将不会打印数据。因此它将崩溃。

下面是我的用法：

{{1}}

希望这将帮助您解决问题。

Answer 3

感谢所有帮助人员。这是我第一次问一个问题，我非常尊重stackoverflow社区。我知道了。各处的语法和数据传递均已正确完成。还有其他一些线程在尝试访问数据之前试图访问该数据，从而导致对象不存在错误

React Native json到平面视图数据

3 个答案: