我的代码中有两个大问题。
import fashion from '../data/fashion.json';
class App extends React.Component {
state = { products: fashion }
updateItem = (filter) => {
this.setState({ products: fashion})
let filteredItem = this.state.products.slice();
let products = filteredItem.filter(item => {
if (item.category === filter || item.size === filter) {
return true;
}
});
this.setState({ products: products })
console.log(products);
}
render() {
return (
<div className="wrapper">
<div className="sidebar">
<SideBar
onClick = {this.updateItem}
items = {this.state.products}
/>
</div>
<main>
<Item
items = {this.state.products}
/>
</main>
</div>
);
}
}
export default App;
class SideBar extends React.Component {
constructor(props) {
super(props);
this.state = { checked: false }
}
getValue = (event) => {
// console.log("Get value", event.target.value);
// Trigers updateItem() on App Component
this.props.onClick(event.target.value);
}
toggleChecked = () => {
if(this.state.checked===false) {
this.setState({ checked: !this.state.checked });
console.log("toggleChecked", this.state.checked);
}
}
render() {
return (
<div>
<ul className="category_list">
<li>
<input
type="radio"
value="shirt"
checked={this.toggleChecked}
onChange={(e) => this.getValue(e)}
/>Shirts
</li>
<li>
<input
type="radio"
value="jacket"
checked={this.toggleChecked}
onChange={(e) => this.getValue(e)}
/>Jackets
</li>
<li>
<input
type="radio"
value="skirt"
checked={this.toggleChecked}
onChange={(e) => this.getValue(e)}
/>Skirts
</li>
<li>
<input
type="radio"
value="pants"
checked={this.toggleChecked}
onChange={(e) => this.getValue(e)}
/>Pants
</li>
</ul>
<ul>
<li>
<input
type="radio"
value="S"
checked={this.toggleChecked}
onChange={(e) => this.getValue(e)}
/>S
</li>
<li>
<input
type="radio"
value="M"
checked={this.toggleChecked}
onChange={(e) => this.getValue(e)}
/>M
</li>
<li>
<input
type="radio"
value="L"
checked={this.toggleChecked}
onChange={(e) => this.getValue(e)}
/>L
</li>
</ul>
</div>
);
}
}
Item.js
const Item = (props) => {
const renderedList = props.items.map((item) => {
return (
<li key={item.id}>
<div className="image_container"><img src={item.image} alt={item.name} /></div>
<p className="product_name">{item.name}</p>
<p className="price">{item.price}</p>
<p>Size: {item.size}</p>
<p>Category: {item.category}</p>
</li>
)
});
return <ul className="products">{renderedList}</ul>
}
[
{
"id": "1",
"name": "Black Shirt",
"price": "$4.99",
"image": "201904041432_1.jpg",
"size": "S",
"category": "shirt"
},
{
"id": "2",
"name": "Pink Medium Shirt",
"price": "$6.99",
"image": "201904041432_1.jpg",
"size": "M",
"category": "shirt"
},
{
"id": "3",
"name": "Red Shirt",
"price": "$3.49",
"image": "201904190794_1.jpg",
"size": "L",
"category": "shirt"
},
{
"id": "4",
"name": "Tight Skirt",
"price": "$12.99",
"image": "401902170012_1.jpg",
"size": "S",
"category": "skirt"
},
{
"id": "5",
"name": "Short Skirt",
"price": "$14.99",
"image": "901904190003_1.jpg",
"size": "M",
"category": "skirt"
},
{
"id": "6",
"name": "Winter Skirt",
"price": "$10.99",
"image": "401902170126_1.jpg",
"size": "L",
"category": "skirt"
},
{
"id": "7",
"name": "Black Jacket",
"price": "$44.99",
"image": "201902181237_1.jpg",
"size": "S",
"category": "jacket"
},
{
"id": "8",
"name": "Denim Jacket",
"price": "$56.99",
"image": "042-901811090003_1.jpg",
"size": "M",
"category": "jacket"
},
{
"id": "9",
"name": "Rider's Jacket",
"price": "$84.99",
"image": "201902041846_1.jpg",
"size": "L",
"category": "jacket"
},
{
"id": "10",
"name": "Blue Medium Shirt",
"price": "$6.99",
"image": "901904240035_1.jpg",
"size": "M",
"category": "pants"
}
]
checked prop不带函数，它需要一个布尔值来指示是否检查它。通常这将是您所在州的布尔值：<input
...
checked={this.state.checked}
/>
请注意，由于您有多个单选按钮，将状态设置为简单的布尔值是不够的，因为您需要知道WHICH按钮被选中。您可以将checked状态设置为您输入的value：
<input
...
value="jacket"
checked={this.state.checked === "jacket"}
/>
设置你的状态的函数应该是onChange的一部分，并且应该将checked状态设置为e.target.value：
getValue = (event) => {
this.props.onClick(event.target.value);
}
toggleChecked = (e) => {
this.getValue(e);
this.setState({ checked: e.target.value });
}
<input
...
value="jacket"
checked={this.state.checked === "jacket"}
onChange={(e) => this.toggleChecked(e)}
/>
您可能希望根据所需的行为进行调整，但这应该是一个很好的起点。例如，如果要允许检查多个框，checked可能是布尔数组或布尔值的对象图。
updateItem函数存在一些问题：
通常，如果你在一个函数中调用setState两次，那么你做错了。 setState是异步的，所以当你按顺序调用它们时，你无法保证特定的行为。
出于与第一点相同的原因，您不能按顺序执行这些操作并保证有用：this.setState({{ someState: someValue }})
// this.state.someState won't be equal to someValue for this statement, unless you're super lucky.
this.functionThatUses(this.state.someState);
我会将函数的前几行更改为以下内容：
updateItem = (filter) => {
//this.setState({ products: fashion})
//let filteredItem = this.state.products.slice();
let filteredItem = fashion.slice();
let products = filteredItem.filter(item => {
if (item.category === filter || item.size === filter) {
return true;
}
});
this.setState({ products: products })
}
......看看能带给你的地方。基本上，不要将组件状态用作临时变量/工作空间 - 它不打算/能够以这种方式使用。