React价格筛选滑块拖动后商品列表无变化，求助修复

拖动价格滑块后商品列表未更新，始终保持原样，怀疑输入值无法传递到Main组件。

Main组件代码 #

import Left from "./Left"
import Content from "./Content"
import Categories from "../store/Categories"
import { useState } from "react"

const Main = ()=>{
    const[data, setState] = useState(Categories);

    const filterPrice = (price)=>{
        const result = Categories.filter((curData)=>{
            return curData.price <= price*1000000;
        });
        setState(result);
    }

    return(
        <div className="row  my-4 mx-2">
        <Left 
        onSlider = {() => filterPrice}
        />
        <Content array={data}/>
        
        </div>
       
    )
}

export default Main

Left组件代码 #

import classes from "./Left.module.css"
import { useState } from "react";

const Left = props =>{
    const [value, setValue] = useState(20);
    var nf = new Intl.NumberFormat();
    const changeValue = (event) => {
        const value = event.target.value
        setValue(value);
        props.onSlider(value);
    }
    return(
        <div className="col-sm-2 col-md-3 col-xl-2 border-right border-bottom position-relative">
            <div className="position-sticky">
                <article className="pb-3">
                            <h4>Price</h4>
                            <input
                            onChange={changeValue}
                            type="range"
                            className="price-filter"
                            min={0}
                            value={value}
                            max={100}
                            />
                            <p className={classes.price}>Value: {nf.format(value*1000000)}đ  </p> 
                 </article>
             </div>
        </div>
    );
};

export default Left;

修复方案 #

问题出在Main组件传递onSlider属性的方式：

你当前写的() => filterPrice只是返回了filterPrice函数本身，并没有实际调用它，也没有传递滑块的值。当Left组件调用props.onSlider(value)时，相当于只拿到了函数引用，并没有执行过滤逻辑。

只需把Main组件里的onSlider传递改成以下两种方式之一：

1. 直接传递filterPrice函数（推荐写法）：

<Left 
  onSlider={filterPrice}
/>

2. 用箭头函数包裹并传递参数：

<Left 
  onSlider={(value) => filterPrice(value)}
/>

修改后，滑块的值就能正确传递到Main组件的filterPrice函数中，执行过滤逻辑并更新商品列表。

内容的提问来源于stack exchange，提问作者Onanigod