Javascript 使用错误的值更新了Reducer（数组更新为一个项目，其中包含少量项目，而不是分散它们）

我很难弄明白这一点。具有作为搜索筛选器的组件，并将所有选定筛选器推送到url中。除了刷新的情况外，一切都正常工作，在这种情况下，reducer将更新为带有单个项的选定过滤器，其中我有所有选定项，而不是分散到数组中

f、 我有网址

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

我的减速机

// ------------------------------------
// 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个元素是平行排列的。 我正在解析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天。希望你能理解我想问的问题，因为我是个新手，不会说英语，所以我不知道所有的术语，所以我可以更好地表达自己。有人能给我一些建议吗？

如果我没记错的话，你正在为减速机添加一个

季节
和
tripType
的数组。因此，当您尝试更新这些值时，实际上并没有扩展该数组。这是您的
值
参数。因此，如果执行此操作，您将拥有一个具有所需结果的父数组：

newFilter.push(...value);

…
是。因此，我们正在扩展阵列并将其推入新的过滤器

但是，如果我没有看错的话，您将在代码中遇到问题，因为您没有正确地检查值的存在。您正在查找某个对象的索引，但如果您真的为减速机提供了一个数组，那么您要查找哪个索引

如果我没有弄错你在这里要做的事情，这里有一个更干净的方法：

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
这里使用的不是检查所有存在值（迭代数组并执行一些逻辑）。它创建了一个具有我们赋予它的独特价值的对象。所以我在这里作弊，通过将我们的值分散到一个数组中来分散我们的旧状态，把这个给我们的集合，然后在顶层再次将它分散到一个数组中。如果不进行最后一次排列，将得到一个对象，但这里我们需要一个数组
好的，是和否。当从下拉列表中手动选择过滤器时，我正在为reducer提供一个数组，用于
sesion
和
tripType
，但当我想从url中为
季节
或
tripType
扩展数组时，我遇到了问题。所以，也许我需要某种检测方法来检测我是否试图从过滤器或url更新数组，在这种情况下，您的解决方案将起作用。现在，它将过滤器拆分为字符，即console.log（newFilter）->['s'，'h'，'o'，'r'，'t'，'u'，'t'，'r'，'i'，'p']。我需要indexOf，这样我就可以知道切换到哪个下拉项。在这种情况下，您需要找到一个逻辑来更新每种情况下的状态，或者应该使用不同的操作。但是，从url中分割参数，这将创建一个数组。我错了吗？对动作不太确定，因为我需要另一个动作/动作创建者使用相同的道具（值、键）将url参数传播到数组中，不知道：/Correct，我正在从url参数制作数组在你的第一条评论中，你说你在从url传播
季节
和
tripType
时遇到问题。如果您正在将一个数组从url传递到减速机，我的代码应该可以工作。你在哪里把异径管作为一根绳子喂入？你是如何得到你在上一次评论中给出的最后一个结果的？实际上，一个简单的isArray检查在这里起作用。但是，我想清楚地了解，这里有两个不同的值：array和string。它应该工作，因为您的值是数组或字符串。