Почему пропсы / действия не проходят с первого раза? - PullRequest
Новая
       91

Почему пропсы / действия не проходят с первого раза?

1 голос
/ 03 августа 2020

У меня есть список «компараторов», из которого я могу выбирать. Я хочу показать суммы счетов в одном компараторе под заголовком.

Мне удалось создать функцию, которая выбирает счета и получает размер. Однако это работает только при второй загрузке страницы. Если я загружаю его в первый раз, результаты всегда показывают 0.

Как я могу убедиться, что при первой загрузке страницы данные выбираются и загружаются правильно?

Вот мой код: 

import React, {Component} from 'react';
import {TouchableOpacity, Image, StyleSheet, View} from 'react-native';
import {HardbaconText} from '../components';
import colors from '../../src/res/colors/index';
import next from '../../src/res/images/files/comparators/next.png';
import I18n from '../i18n/i18n';
import {connect} from 'react-redux';
import * as actions from '../actions';

export class ComparatorOption extends Component {
  constructor(props) {
    super(props);
    this.state = {amount: 0};
  }

  componentDidMount() {
    this.props.getAmount(this.props.type);
  }

  render() {
    return (
      <TouchableOpacity
        style={styles.option}
        onPress={(props, ref) => {
          this.props.navigation.navigate(this.props.destination);
        }}>
        <View style={styles.leftSide}>
          <Image
            style={styles.image}
            resizeMode={'contain'}
            source={this.props.img}
          />
          <View style={styles.textContainer}>
            <HardbaconText style={styles.title}>
              {I18n.t(this.props.type)}
            </HardbaconText>
            <HardbaconText style={styles.subtitle}>
              {`${(this.props.amount && this.props.amount[this.props.type]) ||
                '0'} ${I18n.t('products')}`}
            </HardbaconText>
          </View>
        </View>
        <View style={styles.nextContainer}>
          <Image source={next} style={styles.next} resizeMethod="contain" />
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  option: {
    marginHorizontal: 10,
    backgroundColor: 'white',
    borderRadius: 10,
    height: 80,
    padding: 10,
    marginTop: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  image: {
    width: 25,
    height: '100%',
    marginRight: 20,
    marginLeft: 20,
  },
  leftSide: {
    display: 'flex',
    flexDirection: 'row',
  },
  textContainer: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  title: {
    fontSize: 14,
    fontWeight: '700',
    color: 'black',
  },
  subtitle: {
    fontSize: 9,
    color: colors.hardbaconDarkGray,
  },
  nextContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  next: {
    height: 24,
    opacity: 0.3,
  },
});

const mapStateToProps = ({comparators}) => {
  return {
    amount: comparators.accountsAmount,
  };
};

export default connect(
  mapStateToProps,
  actions,
)(ComparatorOption);


import {
  SET_COMPARATOR_PRODUCTS_AMOUNT,
  GET_COMPARATORS_INSTITUTIONS,
  GET_COMPARATOR_ACCOUNTS,
} from '../types/Comparators';
import Config from 'react-native-config';

import {AxiosInstance} from '../api/AxiosInstance';

export const getAmount = comparator => dispatch => {
  AxiosInstance.get('/comparators/' + comparator, {
    headers: {
      'X-Comparator-API-KEY': Config.COMPARATOR_API_KEY,
      'content-type': 'application/json',
    },
  }).then(res => {
    dispatch({
      type: SET_COMPARATOR_PRODUCTS_AMOUNT,
      payload: {
        comparator: comparator,
        amount: res.data.length,
      },
    });
  });
};

import {
  SET_COMPARATOR_PRODUCTS_AMOUNT,
  GET_COMPARATORS_INSTITUTIONS,
  GET_COMPARATOR_ACCOUNTS,
} from '../types/Comparators';

const INITIAL_STATE = {
  accountsAmount: {},
  institutions: [],
  accounts: [],
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SET_COMPARATOR_PRODUCTS_AMOUNT:
      var accountsAmount = state.accountsAmount;
      accountsAmount[action.payload.comparator] = action.payload.amount;
      return Object.assign({}, state, {accountsAmount: accountsAmount});
    case GET_COMPARATORS_INSTITUTIONS:
      return {
        ...state,
        institutions: action.payload,
      };
    case GET_COMPARATOR_ACCOUNTS:
      return {
        ...state,
        accounts: action.payload,
      };
    default:
      return state;
  }
};

1 Ответ

2 голосов
/ 03 августа 2020

Возможно из-за того, что вы изменяете состояние, попробуйте вместо этого следующее: 

case SET_COMPARATOR_PRODUCTS_AMOUNT:
  //make a shallow copy
  var accountsAmount = {...state.accountsAmount};
  //mutate the shallow copy
  accountsAmount[action.payload.comparator] =
    action.payload.amount;
  return Object.assign({}, state, {
    accountsAmount,
  });
...