Question

在代码中的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());
        //}
    }
}

我想知道我做错了什么。

Answer 1

您使用的useEffect错误。您必须提供一个依赖项，如果您只想运行一次，就给它一个空数组，如下所示：

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

这实际上意味着您的useEffect没有要查找的任何依赖项，因此只能运行一次。如果要根据某些状态是否发生变化来进行更改，则可以在该依赖项数组中传递该状态。

在useEffect中分派异步操作时出现无限循环

1 个答案: