在 Redux React 中传递对象以更改 [重复]

Posted 2023-02-21

【中文标题】在 Redux React 中传递对象以更改 [重复]

【英文标题】：Passing object to change in Redux React [duplicate]

【发布时间】：2020-08-22 02:02:11

【问题描述】：

我想编写一个函数，在接收到我想要更改某个值的项目后，对其进行更改，然后更新过滤器。我不知道如何在我的对象过滤器中找到这个特定元素，因为我传递了对象本身，没有任何“id”

mapActions.js

export const setFilters = (el, old_filters) => 
    console.log(el)
    const filters = 
        ...old_filters,
        [el]:  
          ...old_filters[el],
          active: !old_filters[el].active
        
      ;
    return (dispatch, getState) => 
        dispatch(
            type: actions.SET_FILTERS,
            filters: filters
        )
    

FilersObject.js

    changeFilterHandler = (el, i) => 
        this.props.setFilters(el, this.props.filters);
    

[..]

            Object.keys(this.props.filters).map(x => this.props.filters[x]).map((el, i)=> 
                return(
                    <ObjectFiltersElement 
                        key=i 
                        object=el
                        changeFilterHandler=(el) => (this.changeFilterHandler(el))
                        />
                )
            )

一切正常，但只是我不知道如何在函数 setFilters() 中的 mapActions.js 中在更改变量 'active' 后交换合适的对象

console.log(el)：

我得到的错误：

TypeError: Cannot read property 'active' of undefined

状态：

const initState = 
    filters: 
        basen: 
            active: true,
            name: 'BASEN'
        ,
        koszykowka: 
            active: true,
            name: 'KOSZYKÓWKA'
        ,
        pilka_nozna: 
            active: true,
            name: 'PIŁKA NOŻNA'
        
    

【问题讨论】：

看起来很相似，但没有。我有问题，因为我的函数无法识别在“过滤器”对象中发生变化的对象。我知道如何更改它，但不知道如何告诉我的函数应该是哪一个。我现在编辑了一点我的问题。也许理解问题会更好。

此时，您应该提供minimal reproducible example。请记住不要将答案包含在您的问题中，从而使它们无效。

是的，我知道。抱歉，我还在学习如何使用这个论坛。但是你的回答还是有帮助的，所以谢谢：P

【参考方案1】：

您当前的代码似乎将您的old_filters 更改为setFilters。相反，请确保只更改您创建的新对象。

以下是一种相当常见的模式，可以将状态树浅拷贝到需要更改变量的位置。

export const setFilters = (el, old_filters) => 
  const filters = 
    ...old_filters,
    [el]:  
      ...old_filters[el],
      active: !old_filters[el].active
    
  ;

  return (dispatch, getState) => 
    dispatch(
      type: actions.SET_FILTERS,
      filters: filters
    )
  

编辑：将您的过滤器键而不是对象值传递给您的更改处理程序将是有益的：

Object.entries(this.props.filters).map(([key, el])=> 
  return(
    <ObjectFiltersElement 
      key=key 
      object=el
      changeFilterHandler=() => (this.changeFilterHandler(key))
    />
  )
)

【讨论】：

我试过了，但我得到了 TypeError: Cannot read property 'active' of undefined

我添加了 console.log(el) 屏幕。 setFilters 函数获得了 'el' 的内容，但我认为该函数无法在文件管理器对象中识别它。而且我不知道如何解决它。

@poldeeek 改用[el.name]。

我认为我不能因为我在 redux 中的 initState。我刚刚添加了状态。

好的，我知道结构了。我将建议您如何调用更改处理程序