Question

我试图编写一个函数来展开/折叠过滤器选项列表的长度。这是我第一次将redux用于道具，但我认为部分代码工作正常。

我非常确定问题是切换属性值的功能，该属性值决定是否显示展开或折叠列表。

这里是从组件和切换功能调用切换功能的按钮：

<a className={s.filter_expand} onClick={this.switchTokensToShow.bind(this)}>
  {this.props.allFilters.tokens.length >= 6 ? (this.shouldDisplayAllTokenFilters() ? (
     <span>Show less</span>
  ) : (
     <span>Show more</span>
  )) : null



switchTokensToShow() {
  this.props.filter_list_number('tokens');
}

将函数连接到状态的一些redux代码......

function mapDispatchToProps(dispatch) {
  return {
    filter_list_number: (filterType) => dispatch(filter_list_number(filterType)),
  };
 }

export function filter_list_number(filterType) {
  return{
    type: FILTER_LIST_NUMBER,
    filterType: filterType,
  }
 }

export const FILTER_LIST_NUMBER = 'FILTER_LIST_NUMBER';

返回道具的功能块......

  expandedFilters: {
    categories: false,
    tokens: false,


 case FILTER_LIST_NUMBER:
  const newFilterSettings = toggleExpandedFilter(
    {expandedFilters},
    action.filterType,
  );
  return {
    expandedFilters: {
      newFilterSettings,
    },
  };


  function toggleExpandedFilter(filterSettings, filterType) {
    return !filterSettings.filterType;
  }

最终的功能给了我这些问题。 filterType值始终是两个字符串之一（＆＃34;标记＆＃34;或＆＃34;类别＆＃34;我试图弄清楚如何定位/更改相应filterSettings属性的布尔值

截至目前，该块翻转了expandFilters属性的值，我不确定原因。

Answer 1

有两个问题。

我不确定为什么！运算符构造没有针对指定的键，但它只是返回一个布尔值来代替一个对象。这段代码最终工作了：

function toggleExpandedFilter(filterSettings, filterType) {
  if (filterSettings[filterType] === false) {
    filterSettings[filterType] = true;
  } else {
    filterSettings[filterType] = false;
  }
  return filterSettings; 
}

其次，在CASE返回中，我的原始参数是将变量newSettings作为expandedFilters INSIDE花括号的值返回：

const newFilterSettings = toggleExpandedFilter(
   {expandedFilters},
   action.filterType,
  );
 return {
  expandedFilters: {
  newFilterSettings,
 },
};

所以它嵌套了类别的关键值：和令牌：比组件块试图访问的级别低一级。这意味着......

expandedFilters: {
  newSettings:  {
    categories: false,
    tokens: false,
  },
}

正在发生而不是......

  expandedFilters: {
    categories: false,
    tokens: false,
  }

修复最终是这样的：

   return {
    ...state,
    expandedFilters: newFilterSettings,
  };

React - 使用带字符串参数的函数更改状态属性值（布尔值）

1 个答案: