Question

你好，我在行动中使用了调度：但是由于某种原因，她从不停止发送我的调度，我在响应中使用了console.log，我得到了不间断的

<span id="productTitle" class="a-size-large">
Exotic Nutrition Monkey Biscuits 14 oz. (Orange) - Food for Old World Primates
</span>

和我的容器：

import {FETCH_FAIL,FETCH_LOADING,FETCH_SUCESS} from './actionType';
import api from '../../../services/api';
import { useDispatch } from "react-redux";

const FetchSucess = data  => (console.log(data),{
    type:FETCH_SUCESS,
    data
});
const FetchFailed = error  => ({
    type:FETCH_FAIL,
    error
});
const isLoadingFetch = () => ({type: FETCH_LOADING})


export default function AllProducts  () {
    const dispatch = useDispatch()
    dispatch(isLoadingFetch());
    // fetching data
    api.get('/products')
        .then( response => { dispatch(FetchSucess(response.data))})
        .catch( err => { dispatch(FetchFailed(err.message));});
}

但是在console.log上，我的调度并没有一直停止运行我不知道这是否正确他一直都派遣调度，从不发动

我不知道这是否正常，是否有人可以帮助我。

Answer 1

似乎从AllProducts（）加载数据后就重新渲染了该组件。

const loadProducts = getAllProducts(); 这仅需要调用一次。您需要使用类似于componentDidMount的useEffect（并将第二个参数作为空数组传递）。

import React, { useState, useEffect } from 'react';

export default function Cards() {
        useEffect(() => {
          // This will be invoked only once.
          getAllProducts();
        }, []);

        const classes = useStyles();
        const classes2 = useStyles2();

        const products = useSelector(state => state.data.filteredProducts);



        return (

            <div className="App">
            <Container maxWidth="md" className={classes.root}>
            <Grid container md={4} spacing={1} ></Grid>
            <Grid container md={8} spacing={1} alignItems={"center"}>
            {products.map(product => (
                <Grid item lg={4} md={4} sm={12} xs={12}>
          <Card className={classes2.card}>
              <CardMedia
                className={classes2.media}
                image={
                  "https://www.theclutch.com.br/wp-content/uploads/2019/11/skins-csgo-neymar.jpg"
                }
              />
              <CardContent className={classes2.content}>
                <Typography
                  className={classes2.name}
                  variant={"h6"}
                  gutterBottom
                >
                  {product.name}
                </Typography>
                <Typography
                  className={classes2.price}
                  variant={"h1"}
                >
                 {util.formatCurrency(product.price)}
                </Typography>
              </CardContent>
            </Card>
                </Grid> 
            ))}
            </Grid>
            </Container>
          </div>
        );
    }

反应钩子和redux调度永不停止

1 个答案: