Question

我是新手做出反应＆amp; redux并且在过滤我所谓的见解（文章，案例研究，报告）方面遇到了一些麻烦。我希望按行业进行过滤，但我无法通过过滤的洞察力来更新状态。

InsightsPage.js


const FilterLink = ({
    filter, 
    data,
    children 
}) => {
    return(
        <a href="#"
            onClick={e => {
                e.preventDefault();
                getVisibleInsights(
                    data,
                    filter
                )
            }}
        >{children}
        </a>    
    );
};

const getVisibleInsights = (
    insights,
    filter
) => {
    switch (filter) {
        case 'SHOW_ALL':
            return insights;
        case 'SHOW_AEROSPACE':
            return insights.filter(
                i => i.industry == 'aerospace');    
        case 'SHOW_HEALTHCARE':
            return insights.filter(
                i => i.industry == 'healthcare');   
    }
}


class InsightsPage extends React.Component {
    render() {
        const insights = this.props.insightsPageData.insights;
        return(
            <div className="col-md-12">
                <h2>{this.props.insightsPageData.header}</h2>
                <div className="col-md-4">
                    <InsightsList insights={this.props.visibleInsights} />
                </div>
                <div className="col-md-8">
                  {this.props.children}
                </div>
                <p>
                    Show:
                    {' '}
                    <FilterLink filter="SHOW_ALL" data={insights}>All</FilterLink>
                    {' '}
                    <FilterLink filter="SHOW_AEROSPACE" data={insights}>Aerospace</FilterLink>
                    {' '}
                    <FilterLink filter="SHOW_HEALTHCARE" data={insights}>Healthcare</FilterLink>
                </p>
            </div>
        );
    }
}

InsightsPage.propTypes = {
    insightsPageData: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        insightsPageData: state.insightsPageData,
        visibilityFilter: state.insightsPageData.visibilityFilter,
        visibleInsights: getVisibleInsights(state.insightsPageData.insights, state.insightsPageData.visibilityFilter )
    }
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(InsightsPage);

我正在初始化我的状态，并将visibilityFilter设置为'SHOW_ALL'

initialState.js

export default {
    employeesPageData: {employees: [], page_info:{stats: []}},
    insightsPageData: {insights:[], visibilityFilter: 'SHOW_ALL'},
    newsArticlesPageData: {news_articles:[], page_info:{}},
}

那么，更新InsightsPage状态的最佳方法是什么？它们都在开头显示，所以我的InsightsList正在运行。非常感谢。

Answer 1

您的<FilterLinks>功能组件需要3个道具。你正在推进第一个，但你没有推动数据的道具。修改如下：

<FilterLink filter="SHOW_AEROSPACE" data={this.props.insightsPageData} updateInsights={this.updatInsights.bind(this)} >Aerospace</FilterLink>

// Where updateInsights is something like:

function updateInsights (updated_insights){
  this.setState({insights: updated_insights});
}

然后您可以修改onClick来调用：

this.props.updateInsights(getVisibleInsights(data, filter));

请注意，此approsch 仅设置InsightsPage的本地组件状态，而不是Redux商店的 。

要实现后者：

您必须在减速机上使用新状态。所以：在点击时调度动作，该动作触发使用过滤状态的减速器。然后，更改将传播组件树

在过滤redux道具时更新反应状态

1 个答案: