2
Javascriptを：オブジェクトがキーを持っていますが、私は（CONSOLE.LOGときに、絵で見ることができるようObject.keysが空
を返し、私は、オブジェクトを持っている）こと、最初の行で、それはコースが配列であると言います0の長さの私がそれを展開すると、長さは1であると言います。course.lengthは0です。Object.keys（コース）.lengthは0とも言います。
私のアプリで何をしているのですか、私はリストビューを持っています。 listviewの各項目は展開可能です。各項目はコンテナであり、各コンテナにはコースがあります。私は、リモートサーバからコンテナとコースを得ました。すべてが完璧に機能していました。今私はローカルデータベースからデータをロードしようとしています。私はstackoverflowの上の質問の多く、多くの記事、ないsuccesssを読ん
export default class Main extends Component{
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
};
}
componentWillMount(){
this.fetchData();
}
fetchData(){
let data = fetch..... //// fetches data
let dsource = {};
for(let i=0; i < data.containers.length; i++){
let container = data.containers[i];
dsource[i] = {
containerId: containder.id,
course: [],
}
for(let x=0; x < container.courses.length; x++){
let course = container.courses[x];
dsource[i].course.push({
courseId: course.id,
courseName: course,name
});
}
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(dsource)
});
}:(Object.keys（：それは私の簡略化されたコードを参照してください...もう
を働いていませんObj）.length Obj.lengthはすべて0を返します。 Obj.lengthは列挙可能なプロパティのみを表示するため、Object.defineプロパティでオブジェクトに列挙可能なプロパティを追加しようとしましたが、変更はありませんでした。
すべてのソリューション？どんな助けも高く評価されます。
全体のコードは（ネイティブ反応）：あなたが言ったよう
"use strict";
import React, {Component, PropTypes} from 'react';
import {
ActivityIndicator,
ListView,
StyleSheet,
Text,
View,
Image,
NetInfo,
AlertIOS,
TouchableOpacity,
ScrollView,
Dimensions,
} from 'react-native';
let SQLite = require('react-native-sqlite-storage');
let Loading = require("./Loading");
let Accordion = require('react-native-accordion');
let DeviceInfo = require('react-native-device-info');
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';
import I18n from 'react-native-i18n';
import translations from './translations';
I18n.fallbacks = true;
let LOADING = {};
import CodePush from "react-native-code-push";
let { width, height } = Dimensions.get('window');
let db = SQLite.openDatabase({name : "oc.db", location: 'default'});
export default class Courses extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
isConnected: true,
dataLoaded: 0,
restartAllowed: true
};
}
toggleAllowRestart() {
this.state.restartAllowed
? CodePush.disallowRestart()
: CodePush.allowRestart();
this.setState({ restartAllowed: !this.state.restartAllowed });
}
sync() {
CodePush.sync(
{
installMode: CodePush.InstallMode.IMMEDIATE,
updateDialog: false
},
);
}
componentWillMount() {
NetInfo.isConnected.fetch().then(isConnected => {
this.setState({
isConnected: isConnected
});
});
NetInfo.isConnected.addEventListener(
'change',
isConnected => {
this.setState({
isConnected: isConnected
});
}
);
this.fetchData();
this.sync();
}
componentWillReceiveProps() {
this.fetchData();
this.setState({
keyForCourse: Date()
});
if(this.props.goto == 'register'){
Actions.register({type: 'reset'});
}
}
fetchData() {
console.log('Courses: fetchData running');
if(this.state.isConnected == 'wifi' || this.state.isConnected == 'cell' || this.state.isConnected == 'true' || this.state.isConnected){
this.setState({
isLoading: true,
});
db.transaction((tx) => {
tx.executeSql("SELECT * FROM users WHERE active=?",['yes'], (tx, results) => {
let len = results.rows.length;
let row = results.rows.item(0);
let userName = row.userName;
let userMail = row.userMail;
let userId = row.userId;
///// Getting courses list
db.transaction((tx) => {
tx.executeSql("SELECT * FROM containersC WHERE userId=?",[userId], (tx, results) => {
let dsource = {};
let len = results.rows.length;
if(len > 0){
for(let ind = 0; ind < len; ind++){
let cntr = results.rows.item(ind);
dsource[ind] = {
nid: cntr.nid,
title: cntr.title,
course: [],
courses: {},
};
//// Get courses for each container
db.transaction((tx) => {
tx.executeSql("SELECT * FROM courses WHERE userId=? AND container_nid=?",[userId, cntr.nid], (tx, results) => {
let lenc = results.rows.length;
if(lenc > 0){
for(var j=0; j < lenc; j++){
let crs = results.rows.item(j);
console.log('Course:', crs);
dsource[ind].course.push({
course_id: crs.course_id,
title: crs.title,
cost: crs.cost,
status: crs.status,
period: crs.period // .time_sys
});
dsource[ind].courses[j] = {
course_id: crs.course_id,
title: crs.title,
cost: crs.cost,
status: crs.status,
period: crs.period // .time_sys
};
}
dsource[ind].total = lenc;
}
}, function(){
console.log('Courses: Something went wrong Line 142');
});
});
//// End getting courses for containers
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(dsource),
isLoading: false,
dataLoaded: len
});
}
}, (err)=>{
console.log('Courses: Something went wrong', err);
});
}
);
//// End getting courses list
}, function(){
console.log('Courses: Unable to select users from database');
});
});
} else {
AlertIOS.alert(
I18n.t("no_connection_title"),
I18n.t("no_connection_desc")
);
}
}
selectRow(d, n) {
Actions.cdetails({cid: d, tit: n});
//Actions.rdetails({cid: d, tit: n});
}
renderRow(data) {
let header = (
<View style={{ backgroundColor: '#fff', margin: 7, marginBottom: 0 }}>
<View style={styles.rowContainer}>
<View style={styles.textContainer}>
<Icon name="ios-arrow-up" color="#00a2dd" size={30}></Icon>
<Text style={styles.title}>{data.title}</Text>
</View>
</View>
</View>
);
let headerOpen = (
<View style={{ backgroundColor: '#fff', margin: 7, marginBottom: 0 }}>
<View style={styles.rowContainer}>
<View style={styles.textContainer}>
<Icon name="ios-arrow-down" color="#00a2dd" size={30}></Icon>
<Text style={styles.title}>{data.title}</Text>
</View>
</View>
<View style={styles.separator}></View>
</View>
);
///////////
let cid = [];
let content = [];
let cll = data.total;
console.log('Data to render :', data);
console.log('Courses to render :', data.course);
for(let x=0; x < cll; x++){
cid[x] = data.course[x].course_id;
let courseCost;
switch(data.course[x].cost){
case 0:
courseCost = I18n.t("course_fee_free");
break;
case 1:
courseCost = data.course[x].cost;
break;
}
content.push(
<TouchableOpacity key={cid[x]} onPress={()=>{this.selectRow(data.course[x].course_id, data.course[x].title)}} >
<View style={[styles.cardContainer, {marginBottom: 5}, x == 0 ? { paddingTop: 6, } : {}, x == (cll+1) ? { marginBottom: 3} : {}]} key={cid[x]} >
<View style={styles.card}>
<View resizeMode="cover" style={styles.cardTitleContainer}>
<Text style={styles.cardTitle}>{data.course[x].title}</Text>
</View>
<View
style={{
padding : 15,
}}
>
<Text style={styles.cardContent}>
<Icon name="ios-calendar" color="#00a2dd" size={10}> {data.course[x].period}</Icon>{'\n'}
<Icon name="ios-pricetag" color="#00a2dd" size={10}> {courseCost}</Icon>
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
}
let clist = (
<ScrollView style={styles.scrollView}>
<View style={{
padding: 6,
paddingBottom: 0,
borderTopColor: '#fff',
backgroundColor: '#fff',
margin: 7,
marginTop: 0,
}}>{content}</View>
</ScrollView>
);
////////////
return (
<Accordion
header={header}
headerOpen={headerOpen}
content={clist}
easing="easeOutCubic"
underlayColor="#ebebeb"
/>
);
}
render() {
let content= null;
if(this.state.isLoading){
content = <Loading/>;
} else {
if(this.state.dataLoaded < 1){
content = <View style={styles.errorContainer}>
<View style={styles.error}>
<Text style={styles.Errortext}>
{I18n.t("courses_no_course_available")}
</Text>
</View>
</View>;
} else {
content = <View style={{
flex: 1
}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>;
}
}
return (
<View style={styles.container}>
{content}
</View>
);
}
}
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
flexDirection: "column",
justifyContent: "center",
backgroundColor: '#e4e7ea',
},
separator: {
height: 1,
backgroundColor: "#d0d1d3",
},
scrollSpinner: {
marginVertical: 20,
},
cardContainer:{
flex: 1,
alignItems: 'stretch',
paddingLeft: 6,
paddingRight: 6,
borderColor: '#d0d1d3',
borderWidth: 1,
borderRadius: 5
},
card:{
flex: 1,
backgroundColor: '#ffffff',
borderRadius: 2,
borderColor: '#ffffff',
borderWidth: 1,
/*shadowColor: 'rgba(0, 0, 0, 0.12)',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 2,
},
*/
},
cardTitleContainer:{
flex: 1,
height: 35,
},
cardTitle:{
position: 'absolute',
top: 5,
left: 5,
backgroundColor: 'transparent',
padding: 10,
fontSize: 12,
color: '#4c4b4b',
fontWeight: 'bold',
},
rowContainer: {
flexDirection: 'column',
padding: 5,
},
textContainer: {
flexDirection: 'row',
flex: 1,
padding: 5
},
title: {
paddingTop: 7,
paddingLeft: 5,
color: '#00a2dd'
},
errorContainer: {
flex: 1,
flexDirection: "column",
backgroundColor: '#e4e7ea',
alignItems: 'center',
},
error: {
marginTop: 75,
width: width -150,
height: 100,
borderRadius: 15,
backgroundColor: '#ecebeb',
alignItems: 'center',
justifyContent: 'center',
},
Errortext: {
color: '#757575'
},
});
Courses = CodePush(Courses);
あなたのコードに何が間違っているかを見せてください。 –
Object.keys（配列）を試してから、キーでインデックスを取得しましたか？ https://jsbin.com/huqojefiti/1/editまた、いくつかのコードが役に立つでしょう –
'course'は長さ1の配列で、オブジェクトは位置0にあります – Rajesh