时间戳

首页 > 解决方案 > 如何设置状态

javascript - 如何设置状态

问题描述

晚上好，

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

我的代码：

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

标签： javascriptreactjswebredux

解决方案

您正在返回：

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

console.log()当然对实际组件状态没有影响。尝试使用setItem(products)更新您的状态

推荐阅读