Действие всегда отправляется и оно не останавливается, оно бежит бесконечно

Question

У меня вопрос по поводу отправки. Я не знаю, почему мой диспетчерский редуктор работает бесконечно.

Ниже мой компонент ListUser

import { ListUsersAction } from "../actions/ListUsersAction"; 
const ListUsers = props => {
  var resPerPage = configList.users.resPerPage;
  props.ListUsersAction(resPerPage, 1);

  if (props.listUsersReducer.thanhvien.length > 0) {
    const listUsersReducer = props.listUsersReducer;
    const propToSend = {
      currentPage: listUsersReducer.currentPage,
      pages: listUsersReducer.pages,
      resPerPage: listUsersReducer.resPerPage
    };
    return (
      <Fragment>
        <Pagination pageProp={propToSend} />
      </Fragment>
    );
  } else {
    return null;
  }
};
const mapStateToProp = state => ({
  listUsersReducer: state.listUsersReducer
});
export default connect(mapStateToProp, { ListUsersAction })(ListUsers);

, а вот ListUserAction

export const ListUsersAction  = (resPerPage, currentPage) => async dispatch => {
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  try {
    const res = await axios.get('/api/admin/users/page/:page', {
      params: {
        page: currentPage,
        resPerPage: resPerPage
      } 
    });
    dispatch({
      type: LOADUSERS,
      payload: res.data 
    });

  }catch(err){
    console.log(err);
    dispatch({
      type: STOPLOADUSERS
    })
  }
}

Вы всегда можете увидеть действие render

Можете ли вы сказать мне, почему и как это исправить?

Answer 1

Вы вызываете свое действие каждый раз, когда ваш Component рендерится, и вызов вашего действия вызывает ваш Component повторный рендеринг, создавая бесконечное l oop.

Поместите свое действие в useEffect, чтобы предотвратить это и вызывать его только один раз при монтировании компонента или всякий раз, когда вы хотите на основе массива зависимостей:

useEffect(() => {
    var resPerPage = configList.users.resPerPage;
    props.ListUsersAction(resPerPage, 1);
},[])

Answer 2

  const ListUsers = props => {
  React.useEffect(()=>{
    var resPerPage = configList.users.resPerPage;
    props.ListUsersAction(resPerPage, 1);
  },[])
// your code
};

попробуйте этот

функциональный компонент рендеринга каждый раз, поэтому он требует

проверки хуков API useEffect