Работа с вложенным массивом в реагировать на натив
Я делаю приложение для викторины на собственном языке, я написал API на PHP, который выбирает вопрос и параметры из базы данных, а ответ от API выглядит примерно так:
[{"id":2109,
"title":"\u0915\u0930\u094d\u0923\u093e\u0932\u0940 \u0928\u0926\u0940\u0915\u094b \u0938\u0939\u093e\u092f\u0915 \u0928\u0926\u0940 \u0924\u0932\u0915\u093e \u092e\u0927\u094d\u092f\u0947 \u0915\u0941\u0928 \u0939\u094b\u0907\u0928 ?",
"option":[{
"option_id":191061,
"options":"\u0939\u0941\u092e\u094d\u0932\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
"correct":0
},
{
"option_id":191062,
"options":"\u0920\u0942\u0932\u094b \u092d\u0947\u0930\u0940",
"correct":0},
{
"option_id":191060,
"options":"\u092e\u0941\u0917\u0941 \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
"correct":0
},{
"option_id":191059,
"options":"\u0921\u094b\u0932\u094d\u092a\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
"correct":1
}
]}]
................................
и так далее,
До сих пор я успешно загружал JSON в своем приложении реакции так, как мне нравится. Но теперь я хочу выбрать только одну опцию для каждого вопроса, я хочу, чтобы эта опция была выделена в соответствии с выбором пользователя, а также я должен проверить, является ли пользователь правильным или нет, проверив ответ json.
Как мне этого добиться?
полный код здесь:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
Navigator,
WebView,
ScrollView,
ListView
} from 'react-native';
export default class Api extends Component{
constructor(){
super()
this.state = {
id:'',
option_id:'',
option_option:[],
options_ans:[],
title:'',
data:[],
userSelectedIndex:-1,
}
}
componentWillMount(){
fetch('http://192.168.1.11/loksewaquiz/index.php? exam_of=kharidar', {method: 'GET'})
.then((response) => response.json())
.then((responseData) =>{
this.setState({
data:responseData,
})
})
.done();
}
onUserSelectedOption(index){
this.setState({
userSelectedIndex:index,
});
}
render(){
const result = this.state.data.map((data) =>{
const xx = data.ans_option.map((ans_option,index)=>{
return (
<TouchableHighlight onPress={()=> this.onUserSelectedOption(ans_option, index)}>
<Text key={ans_option.option_id} style={{backgroundColor: (index === this.state.userSelectedIndex) ? 'red' : 'transparent'}}> {ans_option.option_option}</Text>
</TouchableHighlight>
)
})
return(
<View>
<Text style={styles.titles}>{data.title}</Text>
{xx}
</View>
)
})
return(
<ScrollView>
{result}
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button:{
backgroundColor:'#EEE',
padding:10,
marginRight:5,
marginLeft:5,
},
options:{
padding:10,
marginRight:5,
marginLeft:5,
backgroundColor:'#EEE',
},
titles:{
backgroundColor:'#000',
color:'#FFF',
},
selectedoptions:{
backgroundColor:'#008000',
}
});
Решение
Я бы на самом деле отделил опции в новом компоненте и передавал соответствующие данные через реквизит. Не эксперт по js, но звучит более солидно, чем вложенные функции карты.
Другие решения
Что-то вроде этого, дополненное одним из способов подсветки
onUserSelectedOption = (option, index) => {
this.setState({
userSelectedIndex: index
});
if (option.correct === 1) {
//do something
}else {
//do something
}
}
render(){
const result = this.state.data.map((data) =>{
const xx = data.option.map((option, index)=>{
return (
<TouchableHighlight onPress={() => this.onUserSelectedOption(option, index)}>
<Text key={option.option_id} style={{backgroundColor: index === this.state.userSelectedIndex ? 'red' : 'transparent' }}>{option.options}</Text>
</TouchableHighlight>
)
})
return(
<View>
<Text style={styles.titles}>{data.title}</Text>
{xx}
</View>
)
})
return(
<ScrollView>
{result}
</ScrollView>
);
}