Реагировать на нативную реализацию данных JSON в ListView

Question

У меня проблема с реализацией данных API в ListView. Я получил JSON, используя Axios.

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);
        })
  }
}

Reducer. Я добавил данные о ставках в массив

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} /> };но это не сработало. Весь параллельный код находится в одном объекте. Нужно ли разделять данные запятыми? Ценю тебя, помогает. Спасибо

ОБНОВЛЕНИЕ Итак, я пытаюсь реализовать FlatList вместо использования ListView. Проблема в данных JSON. введите описание изображения здесь. Я хочу реализовать ключ, который CountryCurrencyCode(AUD, JPN и т. Д.) Для FlatList. Поскольку нормы - это объект внутри объекта, я добавил объект оценки в массив (редуктор). Но this.props.rates[0] не может быть реализовано для свойства данных FlatList. Какой метод я могу попробовать? Я не могу думать ни о чем. Я мог бы распечатать ключ, используя map(), когда ставками является объект, и тогда я не могу реализовать его в FlatList.

Answer 1

Я бы рекомендовал перейти на новый компонент FlatList через ListView. FlatList просто принимает массив данных для гидратации.

Инициируйте this.state.datasource как пустой массив

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

Получите ваши данные и увлажните this.state.dataSource из вашего редуктора / действия Redux

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 для всех различных вещей, которые вы можете сделать с ним. Надеюсь это поможет!