为什么道具/动作不是第一次通过？

Question

我有一个可供选择的“比较器”列表。我想在标题下方显示一个比较器中的帐户数量。

我能够创建一个函数来获取帐户并获取大小。但是，它只在我第二次加载页面时有效。如果我第一次加载它，结果总是显示 0。

我如何确保在我第一次加载页面时，数据被正确获取和加载？

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;

  }

};

Answer 1

可能是因为您改变了状态，请改为尝试以下操作：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,  });