useEffect запускает запрос API после того, как я обновлю sh страницу

Question

У меня проблема с компонентом, который должен получать учетные записи. У меня есть useEffect ловушка для выполнения запроса, но он запускается только при обновлении sh. Хук useEffect запускает мои console.log с, но не запускает запрос API, пока я не вручную обновлю sh. Общий поток приложения после входа в систему и запуска запроса на отображение таблицы счетов.

Компонент:

import React, { useEffect } from 'react';
import { func, object } from 'prop-types';
import { connect } from "react-redux";
import { getAllPlaidAccountsById } from "../../actions/accountActions";
import styles from "./DebtTable.css";


const DebtTable = ({ auth: { user },  getAllPlaidAccountsById, account: accounts }) => {
  useEffect(() => {
   getAllPlaidAccountsById(user._id);
  }, [getAllPlaidAccountsById]);

  if (accounts && accounts !== null) {
    return (
      <table className={styles.accountsTable}>
        <thead>
        <tr>
          <th>Account Name</th>
          <th>Account Type</th>
          <th>Interest Rate</th>
          <th>Min Payment</th>
          <th>Limit</th>
          <th>Balance</th>
          <th>Due Date</th>
        </tr>
        </thead>
        <tbody>
        {
          accounts.accounts.map((account) => {
            return account.map((acct, idx) => {
              const leftBottomCell = idx === accounts.length - 1 ? 'leftBottomCell' : '';
              const rightBottomCell = idx === accounts.length - 1 ? 'rightBottomCell' : '';

              return (
                <tr key={account.accountId}>
                  <td className={`${styles.accountName} ${styles[leftBottomCell]}`}>{acct.name}</td>
                  <td className={styles.accountType}>{acct.type}</td>
                  <td className={styles.interestRate}>-</td>
                  <td className={styles.minPayment}>-</td>
                  <td className={styles.accountLimit}>{`$${acct.balances.limit}`}</td>
                  <td className={styles.accountBalance}>{`$${acct.balances.current}`}</td>
                  <td className={`${styles.dueDate} ${styles[rightBottomCell]}`}>-</td>
                </tr>
              )
            })
          })
        }
        </tbody>
      </table>
    )
  }
  return null;
}
DebtTable.propTypes = {
  getAllPlaidAccountsById: func.isRequired,
  profile: object.isRequired,
  auth: object.isRequired
};

const mapStateToProps = (state) => ({
  profile: state.profile,
  account: state.account
});

export default connect(mapStateToProps, { getAllPlaidAccountsById })(DebtTable);

Redux Action:

import axios from "axios";
import {
  GET_ALL_PLAID_ACCOUNTS,
  GET_ALL_PLAID_ACCOUNTS_ERROR
} from "./types";

export const getAllPlaidAccountsById = (userId) => async dispatch => {
  try {
    const res = await axios.get(`/api/accounts/${userId}`);

    let creditCards = [];
    res.data.map(account => {
      if(account.type === 'credit') creditCards.push(account);
      return null;
    });

    dispatch({
      type: GET_ALL_PLAID_ACCOUNTS,
      payload: creditCards
    });

  } catch (err) {
    dispatch({
      type: GET_ALL_PLAID_ACCOUNTS_ERROR,
      payload: { msg: err }
    });
  }
};

Редуктор Redux:

import {
  GET_ALL_PLAID_ACCOUNTS,
  GET_ALL_PLAID_ACCOUNTS_ERROR
} from '../actions/types';

const initialState = {
  account: null,
  accounts: [],
  error: {}
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_ALL_PLAID_ACCOUNTS:
      return {
        ...state,
        accounts: [payload, ...state.accounts],
        loading: false
      };
    case GET_ALL_PLAID_ACCOUNTS_ERROR:
      return {
        ...state,
        error: payload,
        loading: false
      };
    default:
      return state;
  }
}

Answer 1

Второй параметр для useEffect - это массив переменных, которые управляют выполнением useEffect. Когда значение переменной в массиве изменится, useEffect будет перезапущено. См. https://reactjs.org/docs/hooks-effect.html#tip -optimizing-performance-by-skipping-effect

Кажется вероятным, что вы хотите получать учетные записи всякий раз, когда user._id изменяется, поэтому вы должны передать массив, содержащий эта переменная как второй аргумент для использованияEffect.

useEffect(() => {
  getAllPlaidAccountsById(user._id);
}, [user._id]);