React redux map reducer答案

【问题标题】：React redux map reducerReact redux map reducer
【发布时间】：2020-09-15 00:30:01
【问题描述】：

我到处寻找，但没有任何效果。我正在尝试根据他们在屏幕上选择的位置来增加/减少位置。

我正在使用 useSelector 尝试获取一段代码。

const leagueSettings = useSelector((state) => state.drafts.rosterSettings);

但我无法使映射工作。状态永远不会更新。我可以看到我正在发送位置和正确位置的更新计数。

我的 action.js

    export const ADD_ROSTER_SPOT = "ADD_ROSTER_SPOT";
export const REMOVE_ROSTER_SPOT = "REMOVE_ROSTER_SPOT";

export const addRosterSpot = (position, count) => {
  return {
    type: ADD_ROSTER_SPOT,
    position: position,
    amount: count
  };
};

export const removeRosterSpot = (position, count) => {
  return {
    type: REMOVE_ROSTER_SPOT,
    position: position,
    amount: count
  };
};

我的 reducer.js

 import { ADD_ROSTER_SPOT, REMOVE_ROSTER_SPOT } from "../actions/draft";

let initialState = {
  leagueSettings: [], // list of league settings,
  rosterSettings: [
    { Position: "QB", amount: 1 },
    { Position: "WR", amount: 1 },
    { Position: "RB", amount: 1 },
    { Position: "TE", amount: 1 },
  ],
  drafted: [], // list of players drafted by others
};

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_ROSTER_SPOT:
        return state.rosterSettings.map(pos => {
            if (pos.Position === action.position) {
            return {...pos, amount: pos.amount + 1}
            }
            console.log(state)
            return pos;
        });
    case REMOVE_ROSTER_SPOT:
      return state.rosterSettings.map((pos) => {
        if (pos.Position === action.position) {
          return { ...pos, amount: pos.amount - 1 };
        }
        return pos;
      });
    default: return state;
  }
};

【问题讨论】：

标签： reactjs redux react-redux react-hooks

【解决方案1】：

你需要修改reducer里面的代码，因为它没有正确更新状态

尝试在减速器的“ADD_ROSTER_SPOT”案例中使用它

let filteredState = state.rosterSettings.filter((eachPos) => {
 if (eachPos.Position === action.Position) {
    eachPos.amount = eachPos.amount + 1;
    return eachPos;
  }
  return eachPos;
});
let newState = Object.assign({}, state, { rosterSettings: filteredState });
return({ ...newState });

【讨论】：

我看到这改变了数组。但是之后我一定是对 useSelector 做错了，因为它不会更新状态。
检查您在根减速器中为减速器提供的名称。它必须与您在 useSelector 中提供的名称相同。
我想通了。上面的代码让我走上了正确的道路，但我需要返回状态，因为这个 return { ...state, newState }

【解决方案2】：

请检查drafts reducer 的定义位置，rootReducer 中的代码是什么？

【讨论】：