反应 setState 嵌套数组回调

Posted 2023-02-22

【中文标题】反应 setState 嵌套数组回调

【英文标题】：React setState nested array callback

【发布时间】：2020-08-04 02:43:15

【问题描述】：

我有一个父组件，其对象包含一些表示范围的嵌套数组：

    class ParentComponent extends React.Component 

        constructor() 
                super();
                this.state = 
                    filters: 
                        rangeArray1: [0, 2000],
                        rangeArray2: [0, 5000]
                       // and many other similar nested arrays
                    
                 
            

          //this gives TypeError: Cannot read property 'name' of undefined
          //it works if there were nested objects instead of arrays
          handleFilterChange = (e) => 
            this.setState(
                filters: 
                    ...this.state.filters,
                    [e.target.name]: e.target.value,
                
            )
        

          //this works, but I need a method that handles all the arrays
          handleFilterChange = (e) => 
            this.setState(
                filters: 
                    ...this.state.filters,
                    rangeArray1: e.value,
                
            )
        

        //render method omitted     
     

我还有一个嵌套更深的子组件，它使用范围滑块处理范围过滤：

        class GrandchildComponent extends React.Component 

                handleFilterChange = e => 
                    this.props.handleFilterChange && this.props.handleFilterChange(e)
                ;

                render() 
                    return (
                        <div>
                             <p>Range1: this.props.filters.rangeArray1[0] - this.props.filters.rangeArray1[1]</p>
                             <Slider id="rangeArray1"
                                     value=this.props.filters.rangeArray1
                                     name="rangeArray1"
                                     onChange=this.handleFilterChange/>

                             <p>Range2: this.props.filters.rangeArray2[0] - this.props.filters.rangeArray2[1]</p>
                             <Slider id="rangeArray2"
                                     value=this.props.filters.rangeArray2
                                     name="rangeArray2"
                                     onChange=this.handleFilterChange/>

                             //and many other similar sliders
                        </div>
                    )
                
            

我有一种情况，用户使用范围滑块过滤一些数据，我试图使用回调方法 handleFilterChange 将输入发送到我的父组件。我无法创建一个可以处理对象中所有数组的方法。 我添加了一些我尝试过的示例代码，但我的两个示例都有一些缺陷。

我正在使用 Primereact slider 组件

【问题讨论】：

你能提供你是如何通过handleFilterChange作为来自ParentComponent组件的prop

嘿@User3000，我创建了一个sandbox 来测试这个。这是你要找的吗？

@Ashish handleFilterChange 以<Child handleFilterChange=this.handleFilterChange/> 形式传递给子渲染

@AjinKabeer 我不确定您所说的测试是什么意思。我正在寻找解决方案，因为我现在有点卡住了。

你能提供Slider组件的onChange实现吗？因为看起来event.target 是undefined。或者，您可以在handleFilterChange 中使用console.log(e) 进行调试。

【参考方案1】：

根据您正在使用的Slider 组件的文档。 onChange 回调函数的参数是一个带有键 originalEvent: Slide event 和 value: New value。所以要访问目标你需要使用event.originalEvent.target。

所以像这样改变你的功能：

handleFilterChange = (e) => 
    this.setState(
        filters: 
            ...this.state.filters,
            [e.originalEvent.target.name]: e.value,
        
    )

另一种方法是，如果您不想使用e.target，那么您可以直接将其传递给函数，而不是使用e.target 中的name

在父组件内部：

handleFilterChange = (sliderName, value) => 
    this.setState(
        filters: 
            ...this.state.filters,
            [sliderName]: value,
        
    )

子组件：

class GrandchildComponent extends React.Component 
    handleFilterChange = (name, value) => 
        this.props.handleFilterChange && this.props.handleFilterChange(name, value)
    ;
    render() 
        return (
            <div>
                <p>Range1: this.props.filters.rangeArray1[0] - this.props.filters.rangeArray1[1]</p>
                <Slider id="rangeArray1"
                    value=this.props.filters.rangeArray1
                    onChange=(e) => this.handleFilterChange(
                        'rangeArray1', e.value
                    )
                />

               //and many other similar sliders
            </div>
        )
    

【讨论】：

我可以确认这是可行的。感谢您的宝贵时间！