不变冲突:对象作为 React 子对象无效(在 json 中使用 react-native 对象)

Question

Using React-Native：

我将从我所拥有的开始..

json文件的示例代码：

和任何"..."仅用于我的字符串值，这些值与问题无关，看起来只会分散注意力

[
{
"id": "question1"
"label": "..."
"option": [ { "order": 1, "name": "..."},
{ "order": 2, "name": "..."},
{ "order": 3, "name": "..."}
]
},
{
"id": "question2"
"label": "..."
"option": [ { "order": 1, "name": "..."},
{ "order": 2, "name": "..."},
{ "order": 3, "name": "..."}
]
},
{
"id": "question3"
"label": "..."
"option": [ { "order": 1, "name": "..."},
{ "order": 2, "name": "..."},
{ "order": 3, "name": "..."}
]
},
and so on....

在类下渲染代码

">

data1"就是我在导入时所说的json文件，例如：从"../../....">

render(){
return(
<View
<FlatList
data={data1}
showsVerticalScrollIndicator={false}
renderItem={this.renderItem}
keyExtractor={(item,index) => index.toString()}
/>
</View>
);
}

呈现项代码

renderItem = ({item}) => {
return(
<View
<TouchableOpacity>
<Text {item.id} </Text>
</TouchableOpacity>
<TouchableOpacity>
<Text {item.label} </Text>
</TouchableOpacity>
<TouchableOpacity>
<Text {item.option} </Text>  /* here is where I get the error because option is an object! */
</TouchableOpacity>
<Text {item.name} </Text>    /* this doesn't work either obviously */
</TouchableOpacity>

我知道我无法访问选项，因为它是一个对象，但我希望能够访问其中的键(顺序和名称(

item.id 和item.label工作，因为它们不在对象"选项"中。我似乎无法弄清楚如何访问要在应用程序中使用的密钥。

作为参考，它是一个调查应用程序(因此是可触摸不透明度(，"标签"是用户的问题，对象"选项"及其"名称"是用户可以单击的各种答案。

我想我可能必须映射它，但我不太确定该怎么做。

Answer 1

item.option是一个对象数组，但不是JSX数组。你可以串化它(可能不是你想要的(，或者你怀疑，你可以将数组映射到可渲染的JSX。

<Text>
{item.option.map(({ order, name }) => (
<div>
order: {order}, name: {name}
</div>
))}
</Text>

这是在 react 中呈现数据对象列表或数组的惯用方法。React-native 更进一步，提供了一个内置组件来处理渲染列表。Flatlist救援。

<FlatList
data={item.option} // <-- pass the array object
renderItem={({ item: { order, name } }) => ( // <-- your render item function
<div>
order: {order}, name: {name}
</div>
)}
/>

将它们放在一起，它看起来像这样：

renderOption = ({ item: { order, name } }) => (
<div>
order: {order}, name: {name}
</div>
);
renderItem = ({item}) => {
return(
<View
<TouchableOpacity>
<Text {item.id} </Text>
</TouchableOpacity>
<TouchableOpacity>
<Text {item.label} </Text>
</TouchableOpacity>
<TouchableOpacity>
<FlatList
data={item.option}
renderItem={this.renderOption}
/>
</TouchableOpacity>
<Text {item.name} </Text>    /* this doesn't work either obviously */
</TouchableOpacity>
</View>
);
}
render(){
return(
<View
<FlatList
data={data1}
showsVerticalScrollIndicator={false}
renderItem={this.renderItem}
keyExtractor={(item,index) => index.toString()}
/>
</View>
);
}