React Native 在 ListView 上实现 JSON 数据

Question

我在 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); 查看道具数据 enter image description here 我花了超过 3 天的时间来弄清楚为什么这不起作用。我尝试使用 map() 添加 renderRow(rate) { return rate.map((data) => { return <ListItem rate={data} /> }; 但它没有用。所有国家代码都在一个对象中，我需要用逗号分隔数据吗？ 感谢您的帮助。谢谢

更新 所以我正在尝试使用 ListView 来实现 FlatList。问题出在 JSON 数据上。 enter image description here。我想将 CountryCurrencyCode(AUD, JPN, etc..) 的键实现到 FlatList。由于rates 是对象中的一个对象，我将rates 对象添加到一个数组（reducer）中。但是 this.props.rates[0] 不能在 FlatList 的 data 属性上实现。我可以尝试什么样的方法？我什么都想不出来。当费率是对象时，我可以使用 map() 打印出密钥，然后我无法在 FlatList 上实现它。

Answer 1

我建议切换到新的 FlatList 组件而不是 ListView。 FlatList 只接受要合并的数据数组。

将 this.state.datasource 初始化为空数组

constructor(props) {
  super(props);
  this.state = {
    dataSource: [],
  }
}

从你的 Redux reducer/action 中获取数据并合并 this.state.dataSource

ComponentDidMount(){
  this.props.fetchRateService();
  var myData = this.props.rates[0];
  this.setState({
    dataSource:myData
  )}
}

现在你的 this.state.dataSource 已经设置好了，我们可以填充 FlatList

<FlatList
  data={this.state.dataSource}
  renderItem={({item})=>this.renderRow(item)} 
/>

Flat List 会抛出一个关于密钥提取器的警告

将下面的这一行添加到 FlatList 组件。您将需要更改“item.key”以适合您自己独特的孩子。您可以暂时保留它以进行开发。

keyExtractor={item => item.key}

您现在应该可以看到您的数据了！请记住，您不必设置 this.state.dataSource。这就是我的做法。您可以将“this.props.rates”数组直接插入 FlatList。查看FlatList docs，了解您可以用它做的所有不同事情。希望这会有所帮助！