извлекать данные внутри useEffect, используя действие в приставке - PullRequest
Новая
       3

извлекать данные внутри useEffect, используя действие в приставке

1 голос
/ 31 января 2020

Я пытаюсь извлечь свои данные из useEffect, но каждый раз, когда я получаю пустой массив, когда я пытаюсь отправить его как реквизит другому компоненту (Продукт)

ProducList. js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { fetchProducts } from "../actions/products";
import { Product } from "./Product";

const ProductList = ({ getProducts, products, loading }) => {
  useEffect(() => {
    getProducts();
  }, []);

  return (
    <div className="p-4">
      <Product products={data} />
    </div>
  );
};

const mapStateToProps = state => ({
  products: state.products,
  loading: state.loading
});

const mapDispatchToProps = {
  getProducts: fetchProducts
};

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

и вот мой продукт. js

import React from "react";

export const Product = props => {
  const products = props.products.map(product => {
    return (
      <div className="col-lg-4 mb-4" key={product.Id}>
        <div className="card shadow-sm">
          <img
            className="card-img-top"
            src={`/images/${product.Id}.jpg`}
            alt={product.name}
          />
          <div className="card-body">
            <h5 className="card-title">
              {product.name}{" "}
              <span className="badge badge-warning">${product.price}</span>
            </h5>
            <a href="#" className="btn btn-secondary mx-auto">
              Add to cart
            </a>
          </div>
        </div>
      </div>
    );
  });

  return <div className="row">{products}</div>;
};

мне нужно получить данные и отправить их компоненту продукта

1 Ответ

2 голосов
/ 31 января 2020

Похоже, ваши данные никогда не передаются в компонент ProductList (в ProductList нет ссылки на данные).

Я полагаю, вы пытаетесь передать данные о продуктах в компонент Products. Вот что ты мог сделать. 

const [newProducts, setNewPropducts] = useState([]);

//add this useEffect and keep your other one
useEffect(() => {
  //set state for products here
  setProducts(products)
}, [products]);


<Product products={newProducts} />
...