如何设置状态

Question

我对反应还很陌生，我正在建设我的第一个主要项目。我想做以下事情：当用户选择产品的特定尺寸时，我想更改项目状态的值。当用户选择尺寸时，只有该尺寸的产品应该出现在屏幕上。我应该做的最后一件事是在用户更改大小时设置状态，但我无法做到这一点：

我的代码：

import React, { Component, useEffect, useState } from 'react'

import { listProduct } from '../../actions/productActions'

import { useDispatch, useSelector } from 'react-redux'

const Filter = () => {

  const productList = useSelector((state) => state.productList)

  const { products } = productList

  const dispatch = useDispatch()

  const [items, setItem] = useState([])

  useEffect(() => {

    dispatch(listProduct())

    setItem(products)

  }, [])

  console.log(items)

  const handleChange = (e) => {

    if (e.target.value === 'S') {

      return console.log(products.filter((item) => item.size === 'S'))

    } else if (e.target.value === 'XS') {

      return console.log(products.filter((item) => item.size === 'XS'))

    } else if (e.target.value === 'M') {

      return console.log(products.filter((item) => item.size === 'M'))

    } else if (e.target.value === 'L') {

      return console.log(products.filter((item) => item.size === 'L'))

    } else if (e.target.value === 'XL') {

      return console.log(products.filter((item) => item.size === 'XL'))

    } else {

      return console.log(products)

    }

  }

  return (

    <div className="filter">

      <label>

        Order:

        <select>

          <option value="lowest">Lowest to Highest</option>

          <option value="highest">Highest to Lowest</option>

        </select>

      </label>

      <label>

        Size:

        <select className="size" onChange={handleChange}>

          <option value="">ALL</option>

          <option value="XS">XS</option>

          <option value="S">S</option>

          <option value="M">M</option>

          <option value="L">L</option>

          <option value="XL">XL</option>

        </select>

      </label>

    </div>

  )

}

export default Filter

Answer 1

这是我制作产品组件的地方：import React, { useState, useEffect } from 'react'import { Link } from 'react-router-dom'import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'import { Library } from '@fortawesome/fontawesome-svg-core'import { faShoppingBasket } from '@fortawesome/free-solid-svg-icons'import { useDispatch, useSelector } from 'react-redux'import Filter from './filter'import { listProduct } from '../../actions/productActions'function Product(props) {&nbsp; //default value is an array, because we've got data in an array&nbsp; const [qty, setQty] = useState(1)&nbsp; const productList = useSelector((state) => state.productList)&nbsp; const { products, loading, error } = productList&nbsp; const dispatch = useDispatch()&nbsp; const [items, setItems] = useState()&nbsp; useEffect(() => {&nbsp; &nbsp; dispatch(listProduct())&nbsp; }, [])&nbsp; // handlefilter&nbsp; // handle cart adding&nbsp; const handleAddToCart = () => {&nbsp; &nbsp; props.history.push('/cart/' + props.match.params.id + '?qty' + qty)&nbsp; }&nbsp; return (&nbsp; &nbsp; // Check the loading before rendering products&nbsp; &nbsp; loading ? (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h1 className="load">loading...</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; ) : error ? (&nbsp; &nbsp; &nbsp; <div>{error}</div>&nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; <ul className="products">&nbsp; &nbsp; &nbsp; &nbsp; {products.map((product) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={product.id} className="product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to={'/product/' + product.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="img"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: `url(${product.img})`,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundSize: 'cover',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {/* LOOK OUT FOR TYPOS IN ROUTIING&nbsp; dont put':' after /, this only applies&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;when routing because the ": " implies for a parameter&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;In this case you can directly access product.id&nbsp; */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to={'/product/' + product.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>{product.name}</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {' '}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <small>€</small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {product.price}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>size: {product.size}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {product.qty > 0 ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={handleAddToCart}>Add to cart</button>{' '}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{product.qty} left</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>out of stock</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; )&nbsp; )}export default Product所以我想根据所选尺寸渲染特定产品

Answer 2

import React, { useState, useEffect } from "react";import "./styles.css";export default function App() {&nbsp; const products = [&nbsp; &nbsp; { size: "S" },&nbsp; &nbsp; { size: "S" },&nbsp; &nbsp; { size: "XS" },&nbsp; &nbsp; { size: "XS" },&nbsp; &nbsp; { size: "M" },&nbsp; &nbsp; { size: "M" },&nbsp; &nbsp; { size: "L" },&nbsp; &nbsp; { size: "L" },&nbsp; &nbsp; { size: "XL" },&nbsp; &nbsp; { size: "XL" }&nbsp; ];&nbsp; const [items, setItem] = useState([]);&nbsp; useEffect(() => {&nbsp; &nbsp; setItem(products);&nbsp; }, []);&nbsp; const handleChange = ({ target: { value } }) => {&nbsp; &nbsp; let filteredProducts = [];&nbsp; &nbsp; filteredProducts =&nbsp; &nbsp; &nbsp; value === "ALL"&nbsp; &nbsp; &nbsp; &nbsp; ? [...products]&nbsp; &nbsp; &nbsp; &nbsp; : products.filter((item) => item.size === value);&nbsp; &nbsp; console.log(value);&nbsp; &nbsp; setItem(filteredProducts);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="filter">&nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; Order:&nbsp; &nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="lowest">Lowest to Highest</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="highest">Highest to Lowest</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; Size:&nbsp; &nbsp; &nbsp; &nbsp; <select className="size" onChange={handleChange}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="ALL">ALL</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="XS">XS</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="S">S</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="M">M</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="L">L</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="XL">XL</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; {items.map((p) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>{p.size}</li>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; );}您只需要将过滤后的数组传递给 setItems 并在 html 中呈现项目。

Answer 3

您正在返回：return&nbsp;(&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(products.filter(item&nbsp;=>item.size&nbsp;===&nbsp;"S"&nbsp;&nbsp;)&nbsp;)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)console.log()当然对实际的组件状态没有影响。尝试使用setItem(products)更新您的状态