将价格从低到高排序，反之亦然

Question

>我有一个问题，我从高到低，从低到高对价格进行排序。问题是，当我一开始单击其中任何一个时，它不会更改任何内容，也不会排序。但是当我再次单击时，它会根据我单击的内容进行排序。

这是搜索类：

export default class Search extends Component{
state = {
item: [],
sortValue: "none"
}
sort = (e) => {
console.log("this.state.sortValue", this.state.sortValue)
this.props.sort(this.state.sortValue)
this.setState({
sortValue: e.target.value
})
}

然后，我的渲染

<div className="col-6 col-lg-7 col-sm-7 col-xs-7">
<select className="form-control form-control-sm" id="exampleFormControlSelect1" value={this.state.sortValue} onChange={this.sort}>
<option value="none">None</option>
{/* <option>Rating</option> */}
<option value="priceLowToHigh">Price Low to High</option>
<option value="priceHighToLow">Price High to Low</option>
</select>
</div>

这是我的数据排序变量：

var dataSort = [
{
name: "Price: Low to High",
value: "price-low-to-high"
},{
name: "Price: High to Low",
value: "price-high-to-low"
},{

编辑：忘了添加这个：

sort = (sortData) => {
console.log("data", sortData)
var obj = []
var { data } = this.state.items2

if(sortData === "priceLowToHigh"){
this.setState({
items2: {
data: data.sort(asc),
meta: this.state.items.meta
}
})
}else if(sortData === "priceHighToLow"){
this.setState({
items2: {
data: data.sort(desc),
meta: this.state.items.meta
}
})
}else if(sortData === "none"){
this.setState({
items2: this.state.items
}, () => {
this.onSearch()
})
}
}

Answer 1

问题是您将 sortedValue 状态传递给 props sort，这就是它从第二次开始工作的原因。状态属性 sortedValue 具有先前值的原因是，您首先传递状态进行排序，然后实际上使用 setState 使用事件对其进行修改。即使您执行 setState，然后将状态属性 sortedValue 传递给 props sort，它也不会起作用，因为状态值仅在组件呈现时才会使用新值更新。

因此，将 event.target.value 直接传递给 props.sort

sort = (e) => {
console.log("this.state.sortValue", this.state.sortValue)
this.props.sort(e.target.value)
this.setState({
sortValue: e.target.value
});
}