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

Question

我正在为用户构建多选组件以选择帖子上的季节。所以使用可以选择Spring和Fall。这里我使用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 来处理选择项目。 （它在this.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
  }

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

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

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

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

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

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
----------------------

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

更新按照弗拉德的建议，我将 SelectedSeasonsSelector 放在 _renderSeasons 中，但每次选择某些内容时，它都会像上面一样打印空结果。我认为它无法获得 state.seasons，state。

  _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 越来越未定义

Answer 1

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

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

不过，选择器的 ID 会被存储在 global redux store 中。

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

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

我在这里猜测，但看起来令人困惑的术语：组件本地 state 与 redux store state 不同。第一个是组件本地的，可以通过this.state 属性访问。其次是与你的所有应用相关的全局数据，存储在redux store中，可以通过getStateredux方法访问。

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