时间戳

首页 > 解决方案 > React.JS Map 数据使用 Hooks useState 在页面加载时设置数据

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

问题描述

我正在将数据从 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)

标签： reactjsreact-hooksuse-effect

解决方案

    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} />
            );
        })
    }

推荐阅读