arrays - Redux、React、MapStateToProps : Retrieve a specific element in an array from the redux state tree

Question

我在 redux 状态树中有一个名为“leagues”的 reducer，它只是一个单独的联赛对象数组。每个联赛都有一个唯一的 ID(在后端分配)和一个名称。

我正在尝试编写一个代表单个联赛的组件，因此我想要一个 mapStateToProps 函数来检索正确的联赛。正确的联赛是从 url 中获知的，即通过 react-router-v4 中的 match Prop 。

我试过:

function mapStateToProps(state, ownProps) {
    return {
        league: state.leagues.find(aLeague => aLeague.id === ownProps.match.params.id)
    }
}

但这导致错误“state.leagues.find”不是函数。

然后我试了一下

function mapStateToProps(state, ownProps) {
    return {
        league: state.leagues[ownProps.match.params.id]
    }
}

这不会出错，但会检索到错误的联赛 - 如果 id 为 3，则检索 state.leagues[3]，而不是 state.leagues.where(league.id === 3)

当我尝试访问单个联赛的页面时联赛的值(value):

leagues: [
    {
      id: 54,
      name: 'Test League'
    },
    {
      id: 55,
      name: 'Another Test'
    }
  ],

以及联盟 reducer 代码:

const initialState = {
  leagues: []
};

export default (state = initialState, action = {}) => {
  switch(action.type) {
    case SET_USER_LEAGUES:
      return state = action.leagues
    case ADD_USER_LEAGUE:
    return [
      ...state,
      {
        id: action.league.id,
        name: action.league.name,
      }
    ];
    default: return state;
  }
}

非常感谢任何帮助。 谢谢!

Answer 1

这是因为当 redux store 被初始化时，你很可能将初始状态设置为 null 这就是为什么你得到错误 state.leagues.find is not一个函数，一旦通过异步 ajax 调用解决了状态，那么状态就在那里。我建议在像 componentDidMount 这样的 React 生命周期方法中制作这种逻辑，并在联盟状态可用后为联盟设置状态。像这样:

componentDidMount() {
  const { leagues } = this.state;
  if (leagues && leagues.length > 0) {
    // update the state to the correct league here and this.props.id is the id that you want
    const league = leagues.find(aLeague => aLeague.id === this.props.id);
    this.setState({
      league
    }
  }
}

希望对您有所帮助。