将Native json反应为平面视图数据

Question

我正试图将数据放入flatlist，以使其看起来适合react原生移动应用程序。项目.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>)
}

有关这方面的更多信息，请参阅MDN上箭头函数的高级语法示例

Answer 2

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

你的感受数据应该是：

feelings= [
{
"node": {
"checkinElement": "Angry",
"checkinElementId": "3157"
}
},
{
"node": {
"checkinElement": "Scared",
"checkinElementId": "3158"
}
},
{
"node": {
"checkinElement": "Sad",
"checkinElementId": "3159"
}
}
]

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

以下是我如何使用它们：

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

希望这能帮助你解决你的问题。

Answer 3

感谢大家的帮助。这是我第一次问这个问题，我真的很尊重stackoverflow社区。我明白了。语法无处不在，数据传递也做得很正确。在数据可用之前，还有一些其他线程试图访问数据，导致对象不存在错误