javascript - reducer 更新了错误的值(数组更新了一个项目，里面只有很少的项目，而不是分散它们)

Question

我很难弄清楚这一点。具有搜索过滤器组件，并将所有选定的过滤器推送到 url 中。一切都像它应该的那样工作，除了刷新的情况下，在这种情况下， reducer 会针对带有单个项目的数组的选定过滤器进行更新，其中我拥有所有选定的项目，而不是传播到数组中。

f.e.我有网址

myexampleapp.com/alltrips?tripType=short_walk,cycling,downhill_cycling,long_walks&season=spring,summer,alle,vinter&lengthTo=50

我的 reducer

// ------------------------------------
// Constants
// ------------------------------------
export const UPDATE_FILTERS = 'UPDATE_FILTERS';

// ------------------------------------
// Actions
// ------------------------------------
const updateFilter = (key, value) => ({
  type: UPDATE_FILTERS,
  payload: {
    key,
    value
  }
});

// ------------------------------------
// Action creators
// ------------------------------------
export const updateFilterState = (key, value) => {
  return dispatch => {
    dispatch(updateFilter(key, value));
  };
};

// ------------------------------------
// Reducer
// ------------------------------------
const initialState = {
  tripType: [],
  season: [],
  tripsTo: undefined,
  tripsFrom: undefined
};

export function filterReducer (state = initialState, action) {
  switch (action.type) {
  case UPDATE_FILTERS: {
    const key = action.payload.key;
    const value = action.payload.value;

    if (key === 'tripsFrom' || key === 'tripsTo') {
      return Object.assign({}, state, { [key]: value });
    } else {
      var newFilter = state[key].slice();
      var ttIdx = state[key].indexOf(value);

      if (ttIdx !== -1) {
        newFilter.splice(ttIdx, 1);
      } else {
        newFilter.push(value);
      }
    }
    console.log(newFilter);
    return Object.assign({}, state, { [key]: newFilter });
  }
  default:
    return state;
  }
}

console.log 返回包含 1 个元素的数组，其中包含包含 5 个元素的数组。但我希望这 5 个 ekements 位于父数组中。我正在解析 URL

  componentDidMount () {
    let {
      location: { search },
      updateFilterState
    } = this.props;

    search = search.slice(1);
    var queries = search.split('&');
    queries.forEach(q => {
      var tmp = q.split('=');
      if (tmp[0] && tmp[1]) {
        if (tmp[0].toLowerCase() === 'triptype') {
          updateFilterState(tmp[0], tmp[1].split(','));
          console.log(tmp[1].split(','));
        } else if (tmp[0].toLowerCase() === 'tripsto') {
          updateFilterState(tmp[0], tmp[1]);
        } else if (tmp[0].toLowerCase() === 'tripsfrom') {
          updateFilterState(tmp[0], tmp[1]);
        } else if (tmp[0].toLowerCase() === 'season') {
          updateFilterState(tmp[0], tmp[1].split(','));
        }
      }
    });
    this.updateQuery(this.props);
  }

所以一切正常，除非我想刷新。

这一切都很新鲜，并且已经被这个问题困扰了将近 3 天。希望您能理解我在这里想问的问题，因为我是个新手，不会说英语，所以我不知道所有术语，这样我才能更好地表达自己。有人可以给我一些指示吗？

Answer 1

如果我没记错的话，您正在向 reducer 提供season和tripType的数组。因此，当您尝试更新这些值时，您实际上并没有传播该数组。这是您的 value 参数。因此，如果您这样做，您将拥有一个包含您所需结果的父数组:

newFilter.push(...value);

... 是 ES6's spread syntax 。所以我们正在扩展我们的数组并将其插入我们的 newFilter 中。

但是，如果我没有看到错误，您将在这段代码中遇到问题，因为您没有正确检查值的存在性。你正在寻找一些东西的indexOf，但是如果你真的用一个数组来喂养你的reducer，那么你正在寻找这个索引是为哪一个？

如果我没有弄错你在这里尝试做的事情，这是一种更干净的方法:

export function filterReducer (state = initialState, action) {
  switch (action.type) {
  case UPDATE_FILTERS: {
    const { key, value } = action.payload;
    if (key === 'tripsFrom' || key === 'tripsTo') {
      return { ...state, [key]: value };
    }  
    const newFilter = Array.isArray(value)
                  ? [ ...new Set( [ ...state[key], ...value ] ) ]
                  : [ ...new Set( [ ...state[key], value ] ) ];
    return { ...state, [key]: newFilter};
  }
  default:
    return state;
  }
}

与您的代码的一些差异:

• 我使用扩展语法而不是 Object.assign。
• 我在这里使用 Set object 而不是检查所有存在值(迭代数组并执行一些逻辑) 。它创建了一个具有我们赋予它的独特值(value)的对象。所以我在这里作弊，通过将我们的值传播到一个数组中来传播我们的旧状态，将其赋予我们的集合，然后在顶层再次将其传播到一个数组中。如果你不进行最后一次传播，你将得到一个对象，但这里我们需要一个数组。