Question

我有一个问题，我在将价格从高到低和从低到高排序。问题是，当我第一次单击它们中的任何一个时，它什么都没有改变，也没有排序。但是当我再次单击时，它会根据我单击的内容进行排序。

这是Search类：

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>

这是我的dataSort var：

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排序，这就是为什么它从第二次开始起作用的原因。状态属性sortedValue具有先前值的原因，因为您首先传递状态进行排序，然后实际上使用setState通过事件修改了它。即使您先设置setState，然后将状态属性sortedValue传递给props排序，它也不会起作用，因为仅当组件呈现时，状态值才会用新值更新。

因此，将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
     });
 }

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

1 个答案: