Question

我建立多选组件供用户选择帖子上的季节。所以使用可以选择春天和秋天。在这里，我使用reselect来跟踪所选对象。

我的问题是我的重新选择并没有触发它第一次渲染的东西。这个问题看起来很长，但它有许多console.log（）行来澄清。所以请耐心等待！：）

（＆＃39; main.js＆＃39;）这是我的模态组件。 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}
  />

（＆＃39; main.js＆＃39;）如您所见，我通过_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的代码与此问题无关。所以让我们继续......：）

（＆＃39; main.js＆＃39;）这是我打电话给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
----------------------

感谢您阅读整个问题，如果您对此问题有任何疑问，请与我们联系。

UPDATE 正如Vlad建议的那样，我将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将被存储在全球redux商店中。

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

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

我在这里猜测，但看起来很混乱：组件本地状态与redux store state 不同。第一个是组件的本地组件，可以通过this.state属性访问。其次是与您的所有应用程序相关的全局数据，存储在redux存储中，可以通过getState redux方法访问。

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

组件调用仅在第一次呈现时重新选择

1 个答案: