Я хочу отобразить данные о городах в сборщике кота / кабупатен, но данные не отображаются после выбора провинции из сборщика пропинси. Пожалуйста, помогите решить эту проблему
здесь код всегда возвращает нуль после выбора провинции:
getCitiesData = (currentProvince) => {
const cities = {}
if (currentProvince) {
this.props.cities.forEach(city => {
cities[city.id] = city.id ? city.city.toString() : city.city.toString()
})
}
return t.enums(cities)
}
здесь код для проверки выбранного значения провинции сборщика:
formChange(newValue) {
console.log('===form change===');
console.log(newValue)
console.log(this.state.formValue.province);
const { formValue } = this.state
const { province } = newValue
if (formValue.province !== province) {
console.log(`province choosed = ${province}`);
this.setState({ currentProvince: parseInt(province)});
this.fetchCitiesByProvince(parseInt(province));
}
this.setState({
formValue: newValue
})
console.log('=================');
}
вот полный код:
constructor(props) {
super(props)
this.state = {
currentProvince: null,
formModel: t.struct({
id: t.Number,
bookingOrderId: t.String,
title: Title,
senderName: t.String,
senderMobile: t.String,
senderEmail: t.String,
senderAddress: t.String,
recipientName: t.String,
recipientMobile: t.String,
goodTypeOrder: GoodTypeOrder,
goodWeight: t.Number,
length: t.Number,
wide: t.Number,
high: t.Number,
address1: t.String,
address2: t.String,
address3: t.String,
postalCode: t.String,
province: this.getProvincesData(),
city: this.getCitiesData(),
subDistrict: t.String,
urbanVillage: t.String,
additionalFacility: t.list(Fasilitas),
bookingNotes: t.String,
schedule: t.Number,
whoOrdered: t.Number
}),
formValue: { id: null, schedule: this.props.data.scheduleId, whoOrdered: this.props.account.id, province: null },
formOptions: {
fields: {
id: {
hidden: true
},
schedule: {
testID: 'routeScheduleIdInput',
hidden: true
},
whoOrdered: {
testID: 'userIdInput',
hidden: true
},
bookingOrderId: {
testID: 'bookingOrderIdInput',
hidden: true
},
title: {
label: 'titel',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('title').refs.input.focus(),
testID: 'titleInput',
stylesheet: stylesheet
},
senderName: {
label: 'nama lengkap pengirim',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('senderName').refs.input.focus(),
testID: 'senderNameInput',
stylesheet: stylesheet
},
senderMobile: {
label: 'nomor telepon selular pengirim',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('senderMobile').refs.input.focus(),
testID: 'senderMobileInput',
template: notel,
stylesheet: stylesheet
},
senderEmail: {
label: 'email pengirim',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('senderEmail').refs.input.focus(),
testID: 'senderEmailInput',
stylesheet: stylesheet,
autoCapitalize: 'none'
},
senderAddress: {
label: 'alamat pengirim',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('senderAddress').refs.input.focus(),
testID: 'senderAddressInput',
stylesheet: stylesheet
},
recipientName: {
label: 'nama lengkap penerima',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('recipientName').refs.input.focus(),
testID: 'recipientNameInput',
stylesheet: stylesheet
},
recipientMobile: {
label: 'nomor telepon selular penerima',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('recipientMobile').refs.input.focus(),
testID: 'recipientMobileInput',
template: notel,
stylesheet: stylesheet
},
goodTypeOrder: {
label: 'jenis barang',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('goodTypeOrder').refs.input.focus(),
testID: 'goodTypeOrderInput',
stylesheet: stylesheet
},
goodWeight: {
label: 'berat barang',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('goodWeight').refs.input.focus(),
testID: 'goodWeightInput',
keyboardType: 'numeric',
stylesheet: stylesheet,
template: berat
},
length: {
label: 'panjang',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('length').refs.input.focus(),
testID: 'lengthInput',
keyboardType: 'numeric',
stylesheet: stylesheet,
template: panjang
},
wide: {
label: 'lebar',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('wide').refs.input.focus(),
testID: 'wideInput',
keyboardType: 'numeric',
stylesheet: stylesheet,
template: lebar
},
high: {
label: 'tinggi',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('tinggiBarangPemesan').refs.input.focus(),
testID: 'highInput',
keyboardType: 'numeric',
stylesheet: stylesheet,
template: tinggi
},
address1: {
label: 'alamat penerima baris 1',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('address1').refs.input.focus(),
testID: 'address1Input',
stylesheet: stylesheet
},
address2: {
label: 'alamat penerima baris 2',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('address2').refs.input.focus(),
testID: 'address2Input',
stylesheet: stylesheet
},
address3: {
label: 'alamat penerima baris 3',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('address3').refs.input.focus(),
testID: 'address3Input',
stylesheet: stylesheet
},
postalCode: {
label: 'kode pos',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('postalCode').refs.input.focus(),
testID: 'postalCodeInput',
keyboardType: 'numeric',
stylesheet: stylesheet
},
province: {
label: 'propinsi',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('province').refs.input.focus(),
testID: 'provinceInput',
stylesheet: stylesheet
},
city: {
label: 'kota / kabupaten',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('city').refs.input.focus(),
testID: 'cityInput',
stylesheet: stylesheet
},
subDistrict: {
label: 'kecamatan',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('subDistrict').refs.input.focus(),
testID: 'subDistrictInput',
stylesheet: stylesheet
},
urbanVillage: {
label: 'kelurahan',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('urbanVillage').refs.input.focus(),
testID: 'urbanVillageInput',
stylesheet: stylesheet
},
additionalFacility: {
label: 'fasilitas tambahan',
returnKeyType: 'next',
onSubmitEditing: () => this.refs.form.getComponent('additionalFacility').refs.input.focus(),
testID: 'additionalFacilityInput',
factory: t.form.formModel,
stylesheet: stylesheet
},
bookingNotes: {
label: 'catatan pengiriman',
multiline: true,
onSubmitEditing: () => this.refs.form.getComponent('bookingNotes').refs.input.focus(),
testID: 'bookingNotesInput',
stylesheet: stylesheet
},
}
},
bookingOrder: {},
success: false
}
this.submitForm = this.submitForm.bind(this)
this.formChange = this.formChange.bind(this)
}
// convenience methods for customizing the mapping of the entity to/from the form value
entityToFormValue = (value) => {
if (!value) {
return {}
}
return {
id: value.id || null,
bookingOrderId: value.bookingOrderId || null,
title: value.title || null,
senderName: value.senderName || null,
senderMobile: value.senderMobile || null,
senderEmail: value.senderEmail || null,
senderAddress: value.senderAddress || null,
recipientName: value.recipientName || null,
recipientMobile: value.recipientMobile || null,
goodTypeOrder: value.goodTypeOrder || null,
goodWeight: value.goodWeight || null,
length: value.length || null,
wide: value.wide || null,
high: value.high || null,
address1: value.address1 || null,
address2: value.address2 || null,
address3: value.address3 || null,
postalCode: value.postalCode || null,
province: value.province && value.province.id ? value.province.id : null,
city: value.city && value.city.id ? value.city.id : null,
subDistrict: value.subDistrict || null,
urbanVillage: value.urbanVillage || null,
additionalFacility: value.additionalFacility || null,
bookingNotes: value.bookingNotes || null,
schedule: value.routeSchedule && value.routeSchedule.id ? value.routeSchedule.id : null,
whoOrdered: value.account && value.account.id ? value.account.id : null
//vehicleDriversId: value.vehicleDrivers && value.vehicleDrivers.id ? value.vehicleDrivers.id : null,
//vehicleId: value.vehicle && value.vehicle.id ? value.vehicle.id : null,
//customerTruckId: value.customerTruck && value.customerTruck.id ? value.customerTruck.id : null
}
}
formValueToEntity = (value) => {
const entity = {
id: value.id || null,
bookingOrderId: value.bookingOrderId || null,
title: value.title || null,
senderName: value.senderName || null,
senderMobile: value.senderMobile || null,
senderEmail: value.senderEmail || null,
senderAddress: value.senderAddress || null,
recipientName: value.recipientName || null,
recipientMobile: value.recipientMobile || null,
goodTypeOrder: value.goodTypeOrder || null,
goodWeight: value.goodWeight || null,
length: value.length || null,
wide: value.wide || null,
high: value.high || null,
address1: value.address1 || null,
address2: value.address2 || null,
address3: value.address3 || null,
postalCode: value.postalCode || null,
//city: value.city || null,
subDistrict: value.subDistrict || null,
urbanVillage: value.urbanVillage || null,
additionalFacility: value.additionalFacility.toString() || null,
bookingNotes: value.bookingNotes || null
}
if (value.province) {
entity.province = value.province.toString()
}
if (value.city) {
entity.city = value.city.toString()
}
if (value.schedule) {
entity.schedule = { id: value.schedule, price: this.props.routeSchedule.price };
}
if (value.whoOrdered) {
entity.whoOrdered = { id: value.whoOrdered };
}
/**
if (value.routeScheduleId) {
entity.routeSchedule = { id: value.routeScheduleId };
}
if (value.userId) {
entity.user = { id: value.userId };
}
if (value.vehicleDriversId) {
entity.vehicleDrivers = { id: value.vehicleDriversId };
}
if (value.vehicleId) {
entity.vehicle = { id: value.vehicleId };
}
if (value.customerTruckId) {
entity.customerTruck = { id: value.customerTruckId };
}**/
console.log('===entity order truck===');
console.log(entity);
return entity
}
getProvincesData = (newPropsProvinces) => {
const provinces = {}
this.props.provinces.forEach(province => {
provinces[province.id] = province.id ? province.name.toString() : province.name.toString()
})
return t.enums(provinces)
}
componentWillMount() {
this.props.getRouteSchedule(this.props.data.scheduleId);
this.props.getAllProvinces({ page: 0, sort: 'id,asc', size: 20 });
this.fetchCitiesByProvince()
//this.props.getAllCities({ page: 0, sort: 'id,asc', size: 20 });
}
submitForm() {
// call getValue() to get the values of the form
const bookingOrder = this.refs.form.props.value;
//console.log(bookingOrder);
if (bookingOrder) {
// if validation fails, value will be null
this.props.updateBookingOrder(this.formValueToEntity(bookingOrder));
//const { booking } = this.state;
//truckPaymentScreen({booking: bookingOrder.id});
}
}
formChange(newValue) {
console.log('===form change===');
console.log(newValue)
console.log(this.state.formValue.province);
const { formValue } = this.state
const { province } = newValue
if (formValue.province !== province) {
console.log(`province choosed = ${province}`);
this.setState({ currentProvince: parseInt(province)});
this.fetchCitiesByProvince(parseInt(province));
}
this.setState({
formValue: newValue
})
console.log('=================');
}
fetchCitiesByProvince = (currentProvince) => {
console.log('fetch api get city by province')
console.log(this.props)
this.props.getAllCitiesByProvince({ province: currentProvince })
}
getCitiesData = (currentProvince) => {
const cities = {}
if (currentProvince) {
this.props.cities.forEach(city => {
cities[city.id] = city.id ? city.city.toString() : city.city.toString()
})
}
return t.enums(cities)
}
render() {
console.log('===render screen===');
console.log(this.state);
console.log(this.props);
console.log('===================');
if (!this.props.routeSchedule){
return (
<View>
<Text>Loading...</Text>
</View>
);
}
const formatted_price = numeral(this.props.routeSchedule.price).format('0,0[.]00');
const departure_date = moment(this.props.routeSchedule.departureTime);
const arrival_date = moment(this.props.routeSchedule.arrivalTime);
const duration = calculateDuration(departure_date, arrival_date);
//const rowTestID = `schedule_${item.id}`;
return (
<View style={styles.container}>
<ScrollView style={styles.barTop}>
<View style={styles.topRow}>
<View style={styles.textTopRow}>
<Text style={styles.textTime}></Text>
<Text style={styles.textTime}>{this.props.routeSchedule.departureCity}</Text>
</View>
<View>
<Image source={Images.arrow} style={styles.icon} />
</View>
<View style={styles.textTopRow}>
<Text style={styles.textTime}></Text>
<Text style={styles.textTime}>{this.props.routeSchedule.arrivalCity}</Text>
</View>
</View>
<View style={styles.boxList}>
<View style={styles.contain}>
<Image style={styles.smallLogo} source={this.props.routeSchedule.companyPicture} />
<Text style={styles.textCompany}>{this.props.routeSchedule.brand}</Text>
<Text style={styles.textCompanyFull}> | {this.props.routeSchedule.company}</Text>
</View>
<View style={{flexDirection:'row'}}>
<View style={{ flex: 2, marginLeft: 20, marginTop: 5}}>
<Text style={{ fontSize: 10 }}>o</Text>
<Text style={{ fontSize: 10 }}>|</Text>
<Text style={{ fontSize: 10 }}>o</Text>
<Text style={{ fontSize: 10 }}>|</Text>
<Text style={{ fontSize: 10 }}>o</Text>
</View>
<View style={{ flex: 62, justifyContent:'space-between',marginBottom: 15}}>
<View style={styles.departureDate}>
<Text style={styles.textDepartureTime}>{departure_date.format('HH:mm')}</Text>
<Text style={styles.textDepartureCity}>Kota {this.props.routeSchedule.departureCity}</Text>
<View style={{flex: 0.1}}></View>
<Text style={styles.textCooler}>{this.props.routeSchedule.coolerType}</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={styles.textRow}>{renderDuration(duration)}</View>
</View>
<View style={styles.arrival_date}>
<Text style={styles.textArrivalTime}>{arrival_date.format('HH:mm')}</Text>
<Text style={styles.textArrivalCity}>Kota {this.props.routeSchedule.arrivalCity}</Text>
<Text style={styles.textPrice}>Rp. {formatted_price}</Text>
</View>
</View>
</View>
</View>
<Text style={styles.textPemesan}>Detail Pemesan</Text>
<Form
ref='form'
type={this.state.formModel}
options={this.state.formOptions}
value={this.state.formValue}
onChange={this.formChange}
/>
<TouchableHighlight style={styles.button}
onPress={this.submitForm}
underlayColor='#99d9f4' testID='submitButton'>
<Text style={styles.buttonText}>pembayaran</Text>
</TouchableHighlight>
</ScrollView>
</View>
)
}
}
const mapStateToProps = (state) => {
console.log('||=== state2props form-order ===||');
console.log(state);
console.log('||=== ======================= ===||');
return {
//routeSchedules: state.routeSchedules.routeSchedules || [],
routeSchedule: state.routeSchedules.routeSchedule,
provinces: state.provinces.provinces,
cities: state.cities.cities,
citiesByProvince: state.cities.citiesByProvince,
subDistricts: state.subDistricts.subDistricts,
subDistrictsByCity: state.subDistricts.subDistrictsByCity,
urbanVillages: state.urbanVillages.urbanVillages,
urbanVillagesBySubDistrict: state.urbanVillages.urbanVillagesBySubDistrict,
account: state.account.account,
fetching: state.bookingOrders.fetchingOne,
error: state.bookingOrders.errorUpdating,
bookingOrder: state.bookingOrders.bookingOrder,
booking: state.bookingOrderBills.booking
}
}
const mapDispatchToProps = (dispatch) => {
console.log('||==Dispatch to Props==||');
console.log(BookingOrderActions);
return {
getAllProvinces: (options) => dispatch(ProvinceActions.provinceAllRequest(options)),
getAllCitiesByProvince: (province) => dispatch(CityActions.cityAllByProvinceRequest(province)),
getAllSubDistrictsByCity: (city) => dispatch(SubDistrictActions.subDistrictAllByCityRequest(city)),
getAllUrbanVillagesBySubDistrict: (subDistrict) => dispatch(UrbanVillageActions.urbanVillageAllByKecamatanRequest(subDistrict)),
getRouteSchedule: id => dispatch(RouteScheduleActions.routeScheduleRequest(id)),
getAccount: () => dispatch(AccountActions.accountRequest()),
updateBookingOrder: bookingOrder => dispatch(BookingOrderActions.bookingOrderUpdateRequest(bookingOrder)),
findBillbyBookingOrder: (booking) => dispatch(BookingOrderBillActions.bookingOrderBillByBookingOrderRequest(booking))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TruckOrderScreen)```