Javascript 过滤redux道具时更新react状态

我对react和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);

那么，更新我的见解状态的最佳方式是什么？它们都在一开始就表现出来了，所以我的见解是有效的。非常感谢

您的

功能组件需要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});
}

请注意，此方法仅设置InsightsPage的本地组件状态，而不设置Redux存储

实现后者：

---

你必须在减速器上使用新状态。所以：单击时分派操作，该操作将触发一个使用筛选状态的减速器。然后更改将在组件树中展开

谢谢，我看到了您的原始评论，并更新了我的问题以包含数据。那么，我可以在getVisibleInsights中调用set state？那么，我将把这个.setState（{insights:getVisibleInsights（data，filter）}）放在哪里呢；这是我最初的想法，但“this”没有定义。我修改了我的答案，以澄清我的意思。我真的很接近，但他们不会更新。我正在将过滤后的洞察导入InsightsPage组件，但我猜，由于我已将状态映射到道具，visibleInsights不会更新，除非我通过该功能？？

<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});
}

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