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

Question

我建立了用户多选择组件选择的岗位季节。所以使用可以选择春季和秋季。在这里，我使用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 
---------------------- 

感谢您阅读这整个问题的如果您对这个问题有任何疑问，请让我知道。

UPDATE由于弗拉德建议，我把SelectedSeasonsSelector放在_renderSeasons里面，但是每次我选择东西时都会打印空的结果。我认为它不能得到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越来越未定义

Answer 1

您似乎假设this.setState将改变Redux的商店，但它不会。

在_seasonSelectAction方法中，您致电this.setState，其中存储了选定的ID，其中容器的本地状态为。

但是，选择器预计ID将被存储在全球REDEX商店。

所以你必须将选定的ID传递给REDX存储，而不是将它们存储在本地状态。而这部分是外观缺失：

1. dispatch行动
2. 使用reducer这个信息存储到redux店。
3. 添加mapDispatchToProps处理您connect

我猜在这里，但看起来容易混淆的名词：组件的本地状态是不一样的终极版店状态。第一个是你的组件的本地，可以通过this.state权限访问。其次是与您的所有应用程序有关的全球数据，存储在REDEX存储中，并可通过getState REDX方法访问。

我所以你可能必须决定是否要用redux堆栈或创建纯反应组件。如果纯粹的反应是你的选择，那么你不得不使用选择器，否则你必须派遣行动，更可能删除this.state。