我正在使用react-native-modals在对话框中显示下拉列表。从下拉列表中选择项目后,对话框会自动关闭并在屏幕上显示所选项目的数据,但下拉列表中的某些项目没有各自的数据。对于这些项目,我应用条件来选择列表中的另一个项目,但在程序中应用条件后,对话框没有关闭,它保持在屏幕上,并在后台显示所选项目的数据。
这是我的代码
constructor(props) {
super(props);
this.state = {
visible: true
}
}
_onCityChange = city => {
const { uid, date } = this.props;
this.setState({
visible: false
});
this.props.citiesShow({ uid, city, date })
}
render() {
console.log(this.props);
let dropdownData = () => {
let cities = this.props.cities;
let count = Object.keys(cities).length;
let cityList = [];
for (let i = 0; i < count; i++) {
cityList.push({ value: cities[i].city });
}
return cityList;
}
const dropdownCity = dropdownData();
if ((this.props.cityName.length > 0) && (this.props.cityData == '')) //THIS IS CONDITION
{
return (
<View style={{ alignItems: "center", justifyContent: 'center' }}>
<Text>No data for this location yet.</Text>
<TouchableHighlight>
<Text style={{ fontSize: 20 }}>Select another city.</Text>
</TouchableHighlight>
</View>
);
}
else{
return (
<View>
<View>
<Dialog
visible={this.state.visible}
dialogAnimation={new SlideAnimation({ slideFrom: 'bottom' })}
dialogStyle={{ opacity: 0.9 }}>
<DialogContent>
<View>
<Dropdown
label='Select your city..'
labelFontSize={14}
selectedItemColor={'black'}
baseColor={'black'}
style={{ fontSize: 22, fontWeight: 'bold' }}
containerStyle={{ width: 300, height: 83 }}
data={dropdownCity}
onChangeText={this._onCityChange} />
</View>
</DialogContent>
</Dialog>
</View>
<FlatList
data={this.props.prayer}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItem} />
</View>
);
}
}
const mapStateToProps = state => {
return {
mainData: state.city.main,
uid: state.city.uid,
date: state.city.date,
cities: state.city.cities,
cityName: state.city.cityName
//loading: state.city.loading
};
};
//Make the component available to other parts of app
export default connect(mapStateToProps, { citiesShow, city, citiesToggle, getCity })(CityData);
CityReducer.js 文件
import { MAIN_DATA, UPDATE_HOME, DATE, CITY_DATA, CITY_NAME} from '../actions/types';
import moment from 'moment';
const INITIAL_STATE = {
main: '',date: moment('01/01/2019', 'DD/MM/YYYY').format('DD MMMM YYYY'), cities: '', city: '',
loading: false,
selectedItem: ''
};
export default (state = INITIAL_STATE, action) => {
console.log(action);
switch (action.type) {
case UPDATE_HOME:
return { ...state, uid: action.payload };
case CITY_DATA:
return { ...state, cities: action.payload };
case CITY_NAME:
return { ...state, city: action.payload };
case MAIN_DATA:
return { ...state, main: action.payload };
default:
return state;
}
};