我在 ListView 中实现 API 数据时遇到问题。我使用 Axios 获取 JSON。
export function fetchRateService() {
return function(dispatch) {
axios.get(RATE_URL)
.then(response => {
dispatch({
type: FETCH_RATE_SERVICE,
payload: response.data
});
})
.catch((error) => {
console.log(error);
})
}
}
减速器。我将费率数据添加到数组中
import {
FETCH_RATE_SERVICE
} from '../actions/types';
const INITIAL_STATE = {
base: '',
date: '',
rates: []
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case FETCH_RATE_SERVICE:
return {
...state,
base: action.payload.base,
date: action.payload.date,
rates: [ ...state.rates, action.payload.rates ]
};
default:
return state;
}
};
这是组件
class ConturyList extends Component {
componentWillMount() {
this.props.fetchRateService();
this.createDataSource(this.props);
}
createDataSource({rates}) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(rates);
}
renderRow(rate) {
return <ListItem rate={rate} />
};
render() {
console.log(this.props);
const { CardSectionStyle, textStyle, containerStyle } = styles;
const { visible, closeModal } = this.props;
return (
<Modal
visible={visible}
transparent={false}
animationType="slide"
onRequestClose={() => {this.props.closeModal()}}
>
<ListView
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
</Modal>
);
}
}
const mapStateToProps = state => {
return {
rates: state.rateService.rates,
date: state.rateService.date,
base: state.rateService.base
};
}
export default connect(mapStateToProps, { fetchRateService } )(ConturyList);
问题是我可以使用 console.log(this.props); 查看道具数据;
在此处输入图像描述
我花了 3 天以上的时间来弄清楚为什么这不起作用。我尝试使用 map() 添加,
renderRow(rate) {
return rate.map((data) => {
return <ListItem rate={data} />
};
但它不起作用。所有国家代码都在一个对象中,我需要用逗号分隔数据吗?感谢您的帮助。谢谢
更新
所以我正在尝试使用 ListView 来实现 FlatList。问题出在 JSON 数据上。在此处输入图像描述。我想将 CountryCurrencyCode(AUD, JPN, etc..) 的键实现到 FlatList。由于rates 是对象中的一个对象,我将rates 对象添加到一个数组(reducer)中。但是this.props.rates[0]
不能在 FlatList 的数据属性上实现。我可以尝试什么样的方法?我什么都想不出来。当费率是对象时,我可以使用 map() 打印出密钥,然后我无法在 FlatList 上实现它。