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

【问题标题】：Passing object to change in Redux React [duplicate]在 Redux React 中传递对象以更改 [重复]
【发布时间】：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

标签： javascript reactjs redux

【解决方案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。我刚刚添加了状态。
好的，我知道结构了。我将建议您如何调用更改处理程序