React.JS Map 数据使用 Hooks useState 在页面加载时设置数据

Question

我正在将数据从 App 传递到我的 Store 组件...当页面加载时，我试图使用 useState 来显示当前产品，以便稍后进行过滤。当我对此使用 useEffect 时，我得到了一个奇怪的 OBJ 返回，我不确定我做错了什么......

当我尝试在函数 filterBrand() 和 filterSize() 中使用 console.log(storeItems) 时，我正在获取第二个/第三个 OBJ 的控制台日志。不知道如何过滤，老实说，我第一次看到...尝试学习最佳实践，所以随时提供解释/示例！谢谢你:)

import React, { useState, useEffect } from "react";
import StoreItems from "./StoreItems.jsx";
import Filter from "../Filters/Filter";

const Store = ({ products, onAddToCart }) => {
    const [storeItems, setStoreItems] = useState([]);
    const [productSize, setProductSize] = useState("");
    const [productBrand, setProductBrand] = useState("");
    const [productCount, setProductCount] = useState(0);

    useEffect(() => {
        console.log(products)

        const allProducts = products.map((product, i) => {
            return (
                <StoreItems key={i} product={product} onAddToCart={onAddToCart} />
            );
        })

        console.log(allProducts)

        setStoreItems(allProducts)

        console.log(storeItems)

    }, [])


    const filterBrand = (event) => {
        setProductBrand(event.target.value)
        console.log(event.target.value)
        console.log(storeItems)
    }

    const filterSize = (event) => {
        setProductSize(event.target.value)
        console.log(event.target.value)
        console.log(storeItems)
    }


    return (
        <main className="storeContent">
            <Filter products={products} productSize={productSize} productBrand={productBrand} productCount={productCount} filterBrand={filterBrand} filterSize={filterSize} />
            <div className="productContainer">
                {storeItems}
            </div>
        </main>
    );
};

export default Store;

张贴返回的屏幕截图

第一个控制台日志是 console.log(products)

第二个是console.log(allProducts)

第三个是 console.log(storeItems)

Answer 1

useEffect 方法中不需要有以下代码。

const allProducts = products.map((product, i) => {
    return (
        <StoreItems key={i} product={product} onAddToCart={onAddToCart} />
    );
})

为了实现预期的行为，

您可以在Store 组件中将products 设置为您的状态。

const [storeItems, setStoreItems] = useState(products);

useEffect(() => {storeItems(products)}, [products])

您可以使用如下简单的方法将数据呈现到 UI。

const renderProducts = () => {
    return storeItems.map((product, i) => {
        return (<StoreItems key={i} product={product} onAddToCart={onAddToCart} />);
    })
}

然后在您的return 语句中，只需将storeItems 更改为renderProducts()。最后你的return 应该如下所示，

    return (
        <main className="storeContent">
            <Filter products={products} productSize={productSize} productBrand={productBrand} productCount={productCount} filterBrand={filterBrand} filterSize={filterSize} />
            <div className="productContainer">
                {renderProducts()} //This line is important.
            </div>
        </main>
    );

然后，每当您想要过滤项目时，您都可以使用类似的东西，

const filterProductsByName = () => {
    let filteredProducts = storeItems.filter(function (item) {
        return item.name === "some product name";
    });
    setStoreItems(filteredProducts);
}

如果你想回到原来的状态，只需使用，

setStoreItems(products);

Answer 2

    const filterBrand = (event) => {
        setProductBrand(event.target.value)

        let filteredProduct = products.filter(product => product.name.includes(event.target.value));
        setStoreItems(filteredProduct);
        setProductCount(filteredProduct.length)

        if (event.target.value === "All") {
            setStoreItems(products)
        };
    }
    const filterSize = (event) => {
        setProductSize(event.target.value)

        let filteredSize = products.filter(product => 
         product.name.includes(event.target.value));
        setStoreItems(filteredSize);
        setProductCount(filteredSize.length)


        if (event.target.value === "All") {
            setStoreItems(products)
        };
    }

这些似乎适用于过滤和 productCount...

仍在试图弄清楚为什么这会返回 0 个产品

    const renderProducts = () => {
        return storeItems.map((product, i) => {
            console.log(product)
            return (
                <StoreItems key={i} product={product} onAddToCart={onAddToCart} />
            );
        })
    }