Как исправить баг в элементе Range из пакета rc-slider?

Question

[Quintis]

Доброго времени суток , делаю интернет магазин ,но есть баг с выбором диапазона цен. Если нажать на кнопку Man а потом перемещаться по категориях shirt shorts jeans ползунки будут выпрыгивать за пределы слайдера, ссылка на сайт и код компонента с слайдером :

https://quintis1212.github.io/max-shop/build/index.html

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ProductList from './ProductList';
import  { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

 class Products extends Component {
    state ={
        selected:true,
        value4: {
            min: 5,
            max: 10,
          }
    }
    brandHandler=(e)=>{
        // console.log(e.target.value)
        let brandVar = e.target.value;
        this.props.filterFunction(brandVar)
    }

    handleOnChange=(e)=>{
        console.log(e)
    }
    render() {
        let brandArr = []
        this.props.data.data.forEach(el=>{
            brandArr.push(el.brand)
        })

        brandArr=['All',...new Set(brandArr)];

        let priceArr =[];
        (this.props.data.brandData? this.props.data.brandData : this.props.data.data).forEach(el=>{
            priceArr.push(el.price)
        })

        let minPrice = Math.min(...priceArr);
        let maxPrice= Math.max(...priceArr);
        console.log(minPrice)
        console.log(maxPrice)

        return (
            <div>
            <label htmlFor="filter-by-brand">Choose your brand : </label>
            <select value={this.props.data.selectedValue}   onChange={(e)=>this.brandHandler(e)} id="filter-by-brand">
                {brandArr.map((el)=>{
                    return <option value={el}  key={el}>{el}</option>
                })}
            </select>
            <div className="price-range">
                <h3 className="range-title">Min price : </h3>
                <h3 className="range-title">Max price : </h3>
             <Range  min={minPrice}  max={maxPrice} defaultValue={[minPrice,maxPrice]} step={1} allowCross={false}  onChange={(e)=>this.handleOnChange(e)}/>
            </div>
            <div className="product-container" >
                <ProductList obj={this.props.data.brandData? this.props.data.brandData : this.props.data.data}/>
            </div>
            </div>
        )
    }
}


export default connect(state=>({
    data:state
}), 
   dispatch=>({
       filterFunction:(brandVar)=>{
        dispatch({type:'FILTER-DATA-BRAND',brandVar})
       }
   })

)(Products)

Answer 1

[Robur]

скорее всего defaultValue применяется только один раз при первом рендере, потом игнорируется, когда вы категории меняете. Самый простой способ - дать Range key и менять его при смене категории.

Comments

[Quintis]

Спасибо! Сработало !