Блог

Я пытаюсь отсортировать некоторые данные в своем приложении. Я хотел бы поддержать следующие варианты:

• Цена (от низкой до высокой)
• Цена (от высокой до низкой)
• Пробег (от низкого до высокого)
• Пробег (от высокого до низкого)

Похоже, сортировка цен работает. Однако, когда я нажимаю на «самый низкий пробег», он продолжает показывать самые высокие результаты по цене — старое значение sorting . Я пытался useEffect , но у меня ничего не вышло. Вот мой код:

App.js

       
      const [carList, setCarList] = useState(cars)
      const [sorting, setSorting] = useState("pricelow")
      
      const handleSort = (e) => {
        setSorting(e.target.value)
        if (sorting === "pricelow"){
          const newlist = carList.sort((a,b) => {
            return parseInt(b.carPrice) - parseInt(a.carPrice)
          })
          setCarList(newlist)
        }
        if (sorting === "pricehigh"){
          const newlist = carList.sort((a,b) => {
            return parseInt(a.carPrice) - parseInt(b.carPrice)
          })
          setCarList(newlist)
        }
        if (sorting === "kmlow"){
          const newlist = carList.sort((a,b) => {
            return parseInt(a.carMileage) - parseInt(b.carMileage)
          })
          setCarList(newlist)
        }
      }
 

AdsList.js

       <select className="form-select w-25" onChange={handleSort} value={sorting}>
          <option value="pricelow">Sort By Lowest Price</option>
          <option value="pricehigh">Sort By Highest Price</option>
          <option value="kmlow">Sort By Lowest Km</option>
          <option value="kmhigh">Sort By Highest Km</option>
      </select>
 

Это происходит потому setSorting sorting , что значение не изменяется сразу, а скорее ожидает, пока компонент не выполнит повторную визуализацию. Видишь https://reactjs.org/docs/react-component.html#setstate

Сделайте это вместо этого:

  const [sorting, setSorting] = useState("pricelow")
  
  const handleSort = (e) => {
    const sortValue = e.target.value;
    setSorting(sortValue)
    
    if (sortValue === "pricelow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(b.carPrice) - parseInt(a.carPrice)
      })
      setCarList(newlist)
    }
    if (sortValue === "pricehigh"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carPrice) - parseInt(b.carPrice)
      })
      setCarList(newlist)
    }
    if (sortValue === "kmlow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carMileage) - parseInt(b.carMileage)
      })
      setCarList(newlist)
    }
  }
 

Еще один совет: используйте switch/case код для очистки.

Функция setSort не установит значение мгновенно. он изменяет значение только при следующем рендеринге

лучший метод-использовать крючок useEffect

   const [carList, setCarList] = useState(cars)
  const [sorting, setSorting] = useState("pricelow")
  useEffect(()=> {
    if (sorting === "pricelow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(b.carPrice) - parseInt(a.carPrice)
      })
      setCarList(newlist)
    }
    if (sorting === "pricehigh"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carPrice) - parseInt(b.carPrice)
      })
      setCarList(newlist)
    }
    if (sorting === "kmlow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carMileage) - parseInt(b.carMileage)
      })
      setCarList(newlist)
    }
  },[sorting])





<select className="form-select w-25" onChange={(e)=>setSorting(e.target.value)} value={sorting}>
      <option value="pricelow">Sort By Lowest Price</option>
      <option value="pricehigh">Sort By Highest Price</option>
      <option value="kmlow">Sort By Lowest Km</option>
      <option value="kmhigh">Sort By Highest Km</option>
  </select>