组件仅在第一次渲染时调用 Reselect

Question

我正在为用户构建多个 Select 组件以 select post 上的季节。所以使用可以选择Spring和Fall。在这里，我使用 reselect 来跟踪 selected 对象。

我的问题是我的 reselect 没有触发它在第一次呈现的内容。这个问题看起来很长，但是有很多 console.log() 行需要说明。所以请多多包涵！ :)

('main.js') 这是我的模态组件。 this.state.items 的数据是 seasons = [{id: '100', value: 'All',}, { id: '101', value: 'Spring',}, { ... }]

return (
  <SelectorModal
    isSelectorVisible={this.state.isSelectorVisible}
    multiple={this.state.multiple}
    items={this.state.items}
    hideSelector={this._hideSelector}
    selectAction={this._selectAction}
    seasonSelectAction={this._seasonSelectAction}
  />

('main.js') 如您所见，我通过 _seasonSelectAction 来处理 selecting 项目。（它adds/removes一个对象to/fromthis.state.selectedSeasonIds的数组）。 selectedSeasonIds: [] 定义在状态中。让我们看一下功能。

  _seasonSelectAction = (id) => {
    let newSelectedSeasonIds = [...this.state.selectedSeasonIds, id];
    this.setState({selectedSeasonIds : newSelectedSeasonIds});
    console.log(this.state.selectedSeasonIds); <- FOR DEBUGGING
    console.log(newSelectedSeasonIds); <- For DEBUGGING
  }

我确认它打印了 selected 项目的 ID。可能提供 SelectorModal.js 的代码与这个问题无关。那么让我们继续...... :)

('main.js') 这里是我调用的地方 createSelector

function mapStateToProps(state) {
  return {
    seasons: SelectedSeasonsSelector(state)
  }
}

export default connect(mapStateToProps, null)(...);

(selected_seasons.js) 最后，这里是 reselect 文件

import { createSelector } from 'reselect';

// creates select function to pick off the pieces of states
const seasonsSelector = state => state.seasons
const selectedSeasonsSelector = state => state.selectedSeasonIds

const getSeasons = (seasons, selectedSeasonIds) => {
  const selectedSeasons = _.filter(
    seasons,
    season => _.contains(selectedSeasonIds, season.id)
  );
  console.log('----------------------');
  console.log('getSeasons');
  console.log(selectedSeasons);    <<- You can see this output below
  console.log('seaons');
  console.log(seasons);
  console.log('----------------------');
  return selectedSeasons;
}

export default createSelector(
  seasonsSelector,
  selectedSeasonsSelector,
  getSeasons
);

系统控制台的输出如下

----------------------
getSeasons
Array []
seaons
undefined
----------------------

感谢您阅读整个问题，如果您对此问题有任何疑问，请告诉我。

UPDATE 按照 Vlad 的建议，我将 SelectedSeasonsSelector 放在 _renderSeasons 中，但每次我 select 东西。我认为它无法获得state.seasons，状态。

  _renderSeasons = () => {
      console.log(this.state.seasons) // This prints as expected. But this becomes undefined 
                                      //when I pass this.state in to the SelectedSeasonsSelector
      selectedSeasons = SelectedSeasonsSelector(this.state)
      console.log('how work');
      console.log(selectedSeasons);
      let seasonList = selectedSeasons.map((season) => {
          return ' '+season;
      })
      return seasonList
  }

state.seasons 和 state.selectedSeasonsIds 变得 undefined

Answer 1

看起来你假设 this.setState 会改变 redux store，但它不会。

在您调用 this.setState 的 _seasonSelectAction 方法中，该方法将选定的 ID 存储在 容器的本地状态 中。

然而，选择器期望 id 将存储在 global redux store.

所以你必须将选定的 id 传递给 redux 存储，而不是将它们存储在本地状态中。这部分看起来不见了：

dispatch动作
使用 reducer 将此信息存储到 redux 存储中。
将 mapDispatchToProps 处理程序添加到您的 connect

这里是我猜的，不过看起来比较混乱 terms:component local state 和 redux store state[=41= 不一样].第一个是您的组件本地的，可以通过 this.state 属性访问。其次是与所有应用程序相关的全局数据，存储在 redux 存储中，可以通过 getState redux 方法访问。

所以你可能必须决定是继续使用 redux 堆栈还是创建纯反应组件。如果纯粹的反应是你的选择，那么你必须使用选择器，否则你必须调度动作并且更有可能删除 this.state.

组件仅在第一次渲染时调用 Reselect

Component calls Reselect only at the first time it renders

reactjs

react-native

react-redux

reselect