Бесконечный l oop при отправке асинхронного действия в useEffect - PullRequest
Новая
       2

Бесконечный l oop при отправке асинхронного действия в useEffect

0 голосов
/ 05 мая 2020

У меня возникло бесконечное l oop после включения отправки в useEffect в свой код. Я проверил ряд других подобных вопросов, но, похоже, не могу решить проблему. Мой компонент выглядит так: 

import React, { useEffect } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Paper, Grid } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { fetchInvestment } from '../../action/apirequest';

const useStyles = makeStyles({
    table: {
      minWidth: 650,
    },
  });

  const tableHeading = ['Title', 'Amount', 'Start Date', 'End Date', 'Type'];
  const displayedResult = [{title: 'mike',amount: 'startDate', endDate: 'mike',type: 'mike' }, {title: 'mike',amount: 'startDate', endDate: 'mike',type: 'mike' }];
  const tableDataKey = ['title', 'amount','startDate', 'endDate', 'type'];
const InvestmentTable=(props)=>{
    const classes = useStyles();
    const dispatch = useDispatch();

    useEffect(()=>dispatch(fetchInvestment()));

    const tableData = useSelector(state=>state).dataReducer.dataArray;
    console.log('data', tableData);
    return(<Grid container={true} ><Grid justify="center" alignItems="center" item xs={12} > <TableContainer component={Paper}>
        <Typography className="typo-table" variant="h5">{props.heading}</Typography>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell className="table-head">S/N</TableCell>
              {tableHeading.map(item=>(<TableCell className="table-head" key={item} align="left"> {item}</TableCell>))}
              <TableCell className="table-head" align="left">Options</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
          {displayedResult.map((row, i) => (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {i+1}
                </TableCell>
                {tableDataKey.map((cell)=>(<TableCell key={cell} align="left">{row[cell]}</TableCell>))}
                <TableCell align="left"></TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      </Grid></Grid>)

}

export default InvestmentTable;

Асинхронное действие, отправленное через useDispatch, выглядит следующим образом: 

export const fetchInvestment=()=>{
  return function(dispatch, getState){
    const {authToken, userId} = getState().authReducer;
    token= authToken;
      const data= {};
      data.userId = userId;
      const url = 'investment/fetchAll';
      apiCall(url, data, dispatch,'post').then((data)=>{
        try{
          if(data.status=== 200){
            console.log('success',data);
            dispatch(ArrayLoaded(data.data.data));
          }
        }
        catch(error){
          console.log('returnedError',error);

        }
      }, (error)=>{console.log(error)});
      
      
  }
}




const apiCall= async (url, data, dispatch, type="get")=>{
    dispatch(requestStarted());
    const requestUrl = appUrl+url;
    let response;
    try{
    if(type === "get"){
        response = await axios(requestUrl, header());
      }
      else {
        response= await axios.post(requestUrl, data, header());
      }
      //toast.success()
      dispatch(requestComplete());
      return response;
    }
    catch(error){
        console.log(error);
        console.log(error.response.status);
        console.log(error.response.data.message);
        //if(error.response.status === 401){
          toast.error(error.response.data.message);
          //dispatch(notify(error.response.data.message))
          dispatch(requestComplete());
        //}
    }
}

Я хотел бы знать, что я делаю неправильно.

1 Ответ

1 голос
/ 05 мая 2020

Вы неправильно используете useEffect. Вы должны предоставить ему зависимость, и в вашем случае, если вы хотите, чтобы он запускался только один раз, дайте ему пустой массив, например: 

   useEffect(()=>{
    dispatch(fetchInvestment())
    },[])

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

...