異步調用 axios API 后，帶有反應鈎子和 redux 的 SetState

Question

我正在使用 axios 從服務器獲取產品並在CatalogProducts組件中呈現數據，如下所示：

const CatalogProducts = props => {
  const classes = useStyles();

  const [data, setData] = useState([]);

  const fetchProducts = async () => {
    await props.getProducts();
  };

  useEffect(async () => {
    fetchProducts();
    setData(props.products);
  }, []);

  const { products } = props.products;

  const items = products.map((product, index) => {
    return (
      <Grid item xs={12} sm={6} md={3} key={index}>
        <CatalogProduct product={product} />
      </Grid>
    );
  });

  if (products.length === 0) {
    return <p>Loading ...</p>;
  } else {
    return (
      <Container maxWidth="xl" className={classes.root}>
        <Grid
          container
          direction="row"
          justify="center"
          alignItems="center"
          spacing={3}
        >
          {items}
        </Grid>
      </Container>
    );
  }
};

const mapStateToProps = state => {
  return {
    products: state.products
  };
};

const mapDispatchToProps = dispatch => ({
  getProducts: () => dispatch(actions.getProductsAction())
});

export default connect(mapStateToProps, mapDispatchToProps)(CatalogProducts);

我可以使用props.products訪問產品數據，但是當我想使用數據變量訪問它們時，我不知道使用 setData() 是否是個好主意？

Answer 1

在您的功能組件中，您可以使用更易於使用的新useDispatch和useSelector功能。

你能用這個替換你的 CatalogProducts 代碼，導入其他必要的導入並嘗試嗎？

import React, { useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
//other imports

const CatalogProducts = () => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const products = useSelector(state => state.products);
  console.log("Products: ", products);

  const fetchProducts = useCallback(() => {
    dispatch(actions.getProductsAction());
  }, [dispatch]);

  useEffect(() => {
    fetchProducts();
  }, [fetchProducts]);

  const items = products.map((product, index) => {
    return (
      <Grid item xs={12} sm={6} md={3} key={index}>
        <CatalogProduct product={product} />
      </Grid>
    );
  });

  if (!products) {
    return <p>Loading ...</p>;
  } else if (products.length === 0) {
    return <div>No products found</div>;
  } else {
    return (
      <Container maxWidth="xl" className={classes.root}>
        <Grid
          container
          direction="row"
          justify="center"
          alignItems="center"
          spacing={3}
        >
          {items}
        </Grid>
      </Container>
    );
  }
};

export default CatalogProducts;

使用 jsonplaceholder fake api 的示例代碼和框。