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} /> }; 但它不起作用。所有的conutry代码都在一个对象中，我是否需要用逗号分割数据？感谢你的帮助。谢谢

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

Answer 1

我建议切换到ListView上的新FlatList组件。 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组件中。您需要更改＆＃39; item.key＆＃39;适合自己独特的孩子。您现在可以暂时保留它以进行开发。

keyExtractor={item => item.key}

您应该立即看到您的数据！请记住，您不必设置this.state.dataSource。它就是我如何做到的。你可以插入这个.props.rates＆＃39;直接将数组放入FlatList中。查看FlatList docs，了解您可以使用它执行的所有不同操作。希望这有帮助！

React Native在ListView上实现JSON数据

1 个答案: