首頁猿問如何設置狀態

如何設置狀態

JavaScript

紅糖糍粑 2023-04-14 17:33:38

我對反應還很陌生，我正在建設我的第一個主要項目。我想做以下事情：當用戶選擇產品的特定尺寸時，我想更改項目狀態的值。當用戶選擇尺寸時，只有該尺寸的產品應該出現在屏幕上。我應該做的最后一件事是在用戶更改大小時設置狀態，但我無法做到這一點：我的代碼：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

查看完整描述

3 回答

動漫人物

TA貢獻1815條經驗獲得超10個贊

這是我制作產品組件的地方：

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) {

//default value is an array, because we've got data in an array

const [qty, setQty] = useState(1)

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

const { products, loading, error } = productList

const dispatch = useDispatch()

const [items, setItems] = useState()

useEffect(() => {

dispatch(listProduct())

}, [])

// handlefilter

// handle cart adding

const handleAddToCart = () => {

props.history.push('/cart/' + props.match.params.id + '?qty' + qty)

}

return (

// Check the loading before rendering products

loading ? (

<div>

<h1 className="load">loading...</h1>

</div>

) : error ? (

<div>{error}</div>

) : (

{products.map((product) => (

<div

className="img"

style={{

background: `url(${product.img})`,

backgroundSize: 'cover',

}}

></div>

</Link>

{/* LOOK OUT FOR TYPOS IN ROUTIING dont put':' after /, this only applies

when routing because the ": " implies for a parameter

In this case you can directly access product.id */}

<h1>{product.name}</h1>

</Link>

<p>

{' '}

{product.price}

</p>

<div>size: {product.size}</div>

{product.qty > 0 ? (

<div>

<button onClick={handleAddToCart}>Add to cart</button>{' '}

<div>{product.qty} left</div>

</div>

) : (

<div>out of stock</div>

)}

</li>

))}

</ul>

)

}

export default Product

所以我想根據所選尺寸渲染特定產品

反對回復 2023-04-14

隔江千里

TA貢獻1906條經驗獲得超10個贊

import React, { useState, useEffect } from "react";

import "./styles.css";

export default function App() {

const products = [

{ size: "S" },

{ size: "XS" },

{ size: "M" },

{ size: "L" },

{ size: "XL" },

{ size: "XL" }

];

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

useEffect(() => {

setItem(products);

}, []);

const handleChange = ({ target: { value } }) => {

let filteredProducts = [];

filteredProducts =

value === "ALL"

? [...products]

: products.filter((item) => item.size === value);

console.log(value);

setItem(filteredProducts);

};

return (

<label>

Order:

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

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

</select>

</label>

<label>

Size:

</select>

</label>

<ul>

{items.map((p) => (

))}

</ul>

</div>

);

}

您只需要將過濾后的數組傳遞給 setItems 并在 html 中呈現項目。

反對回復 2023-04-14

嚕嚕噠

TA貢獻1784條經驗獲得超7個贊

您正在返回：

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

console.log()當然對實際的組件狀態沒有影響。嘗試使用setItem(products)更新您的狀態

反對回復 2023-04-14

3 回答
0 關注
149 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何設置狀態

如何設置狀態

3 回答

添加回答