Reactjs 如何使用价格滑块过滤价格

我有产品阵列如下，从那里我想过滤产品的基础上的价格 现在我想根据价格筛选产品 所以我使用react range软件包进行价格过滤 我的代码如下，但我遇到了错误，有人能帮我吗

项目：[ { _id:“1”， 名称：“产品1”， 描述：“学习Python”， 图片：“/images/pic1.jpg”， 价格:15,

        },
       {
          _id: "2",
          name: "product2",
          desc:"ReactJS from scrach",
         image:"/images/pic2.jpg",
          price: 12

        },
        {
          _id: "3",
          name: "product3",
          desc:"Learn Javascript ",
         image:"/images/pic3.jpg",
          price: 65,

        },
       {
          _id: "4",
          name: "product4",
         desc:"Learn Vue js ",
         image:"/images/pic4.jpg",
          price: 50,

        }

      ]
    };



const MIN = 0;
const MAX = 100;
const [min, setMin] = useState(MIN);
const [max, setMax] = useState(MAX);
const [priceFilter, setPriceFilter] = useState([min, max]);

 setMin( items.reduce((m, p) => (p.price < m ? p.price : m), Infinity));
 setMax(items.reduce((m, p) => (p.price > m ? p.price : m), -Infinity));

    return(
            <>
          <ul>
            <li>
              <div className="filter">
                {items.length && (
                  <Range
                    step={10}
                    min={min}
                    max={max}
                    values={priceFilter}
                    onChange={(values) => setPriceFilter(values)}
                    renderTrack={({ props, children }) => (
                      <div
                        onMouseDown={props.onMouseDown}
                        onTouchStart={props.onTouchStart}
                        style={{
                          ...props.style,
                          height: "36px",
                          display: "flex",
                          width: "100%",
                        }}
                      >
                        <div
                          ref={props.ref}
                          style={{
                            height: "5px",
                            width: "100%",
                            borderRadius: "4px",
                            background: getTrackBackground({
                              values: priceFilter,
                              colors: ["#ccc", "#548BF4", "#ccc"],
                              min,
                              max,
                            }),
                            alignSelf: "center",
                          }}
                        >
                          {children}
                        </div>
                      </div>
                    )}
                    renderThumb={({ props, isDragged }) => (
                      <div
                        {...props}
                        style={{
                          ...props.style,
                          height: "16px",
                          width: "16px",
                          borderRadius: "1px",
                          backgroundColor: "#FFF",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                          boxShadow: "0px 1px 2px #888888",
                        }}
                      >
                        <div
                          style={{
                            height: "8px",
                            width: "3px",
                            backgroundColor: isDragged ? "#548BF4" : "#CCC",
                          }}
                        />
                      </div>
                    )}
                  />
                )}
                <div className="form-row price-range">
                  <div>{priceFilter[0]}</div>
                  <div>{priceFilter[1]}</div>
                </div>
                <button className="button primary">Apply</button>
              </div>
            </li>
         </ul>

            {items.map(item=>(
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src={item.image} alt={item.name}>
      <div class="card-body">
        <h5 class="card-title">{item.name}</h5>
        <p class="card-text">{item.desc}</p>
        <p class="price">${item.price}</p>

      </div>
    </div>
    ))}
        </>   
        )

}，
{
_id:“2”，
名称：“产品2”，
描述：“来自scrach的反应JS”，
图片：“/images/pic2.jpg”，
价格:12
},
{
_id:“3”，
名称：“产品3”，
描述：“学习Javascript”，
图片：“/images/pic3.jpg”，
价格:65，
},
{
_id:“4”，
名称：“产品4”，
描述：“学习Vue js”，
图片：“/images/pic4.jpg”，
价格:50,，
}
]
};
常数MIN=0；
常数MAX=100；
const[min，setMin]=使用状态（min）；
const[max，setMax]=useState（max）；
const[priceFilter，setPriceFilter]=useState（[min，max]）；
setMin（items.reduce（（m，p）=>（p.price（p.price>m？p.price:m），-无穷大）；
返回(


{items.length&&(
setPriceFilter（值）}
renderTrack={（{props，children}）=>(
{儿童}
)}
renderThumb={（{props，isDraged}）=>(
)}
/>
)}
{priceFilter[0]}
{priceFilter[1]}
申请


{items.map（item=>(
{item.name}
{item.desc}
${item.price}
))}
)

@a\m\u dev，谢谢您的回复

我附上如下错误 error1-当这些setMin、SetMax超出useEffect时，会弹出此错误

setMin（items.reduce（（m，p）=>（p.price（p.price>m？p.price:m），-无穷大）；

错误2：当这些setMin、SetMax在useEffect内时，会弹出此错误

---

你能提供错误吗？如果你想为滑块设置最小值和最大值，你可以从products数组中过滤价格，并通过使用Math.min（数组）和Math.max（数组）获得该数组的最小值和最大值。你是对的，但我必须从json数组中过滤价格，因此我认为我需要应用reduce方法，当我要渲染reduce方法时，它会抛出一个错误。如果您有任何不同的方法或其他意见，请帮助我。

setMin( items.reduce((m, p) => (p.price < m ? p.price : m), Infinity));
 setMax(items.reduce((m, p) => (p.price > m ? p.price : m), -Infinity));