javascript - 异步调用 axios API 后使用 React hook 和 redux 设置状态

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 访问产品数据，但是当我想使用 data 变量访问它们时，我不知道这是否是一个好主意与 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;

样本codesandbox使用 jsonplaceholder fake api。