阿波羅似乎刷新了，當狀態映射到道具時，我該如何防止它？

我已經建立了一個組件，基本上列出了表中的條目，最重要的是，我有另一個組件可以應用過濾器。這一切對阿波羅來說都非常棒。阿波羅似乎刷新了，當狀態映射到道具時，我該如何防止它？

我試圖添加深層鏈接到過濾器，這在紙上看起來簡直令人難以置信，而且我幾乎讓我工作。

讓我分享一些代碼。

const mapStateToProps = ({ activeObject }) => ({ activeObject }); 

@withRouter 
@connect(mapStateToProps, null) 
@graphql(FILTER_REPORT_TASKS_QUERY, { 
    name: 'filteredTasks', 
    options: (ownProps) => { 
    const filters = queryString.parse(location.search, { arrayFormat: 'string' }); 

    return { 
     variables: { 
     ...filters, 
     id: ownProps.match.params.reportId, 
     }, 
    }; 
    }, 
}) 
export default class TasksPage extends Component { 
    static propTypes = { 
    filteredTasks: PropTypes.object.isRequired, 
    activeObject: PropTypes.object.isRequired, 
    match: PropTypes.object.isRequired, 
    }; 

    constructor(props) { 
    super(props); 

    const filters = queryString.parse(location.search, { arrayFormat: 'string' }); 
    this.state = { didSearch: false, initialFilters: filters }; 
    this.applyFilter = this.applyFilter.bind(this); 

    } 

    applyFilter(values) { 
    const variables = { id: this.props.match.params.reportId }; 
    variables.searchQuery = values.searchQuery === '' ? null : values.searchQuery; 
    variables.categoryId = values.categoryId === '0' ? null : values.categoryId; 
    variables.cardId = values.cardId === '0' ? null : values.cardId; 

    /* 
    this.props.history.push({ 
     pathname: `${ this.props.history.location.pathname }`, 
     search: '', 
    }); 
    return null; 
    */ 

    this.props.filteredTasks.refetch(variables); 
    this.setState({ didSearch: true }); 
    } 

    ..... Render functions.

基本上它會在選擇過濾器時調用應用過濾器方法。

這一切都很好，我的問題是，當activeObject更新（通過選擇列表中的一個條目）。它似乎運行我的HOC graphql，它將再次應用URL中的過濾器，忽略用戶選擇的過濾器。

我試圖從url中刪除查詢字符串，一旦應用了過濾器，但我得到了一些意外的行爲，基本上它就像它不能再次獲取。

我怎樣才能防止阿波羅提取，只是因爲REDX推動新的狀態？

來源

2017-08-12 MartinElvar

我實際上是通過改變HOC的順序來解決這個問題的。

@graphql(FILTER_REPORT_TASKS_QUERY, { 
    name: 'filteredTasks', 
    options: (ownProps) => { 
    const filters = queryString.parse(location.search, { arrayFormat: 'string' }); 
    return { 
     variables: { 
     ...filters, 
     id: ownProps.match.params.reportId, 
     }, 
    }; 
    }, 
}) 
@withRouter 
@connect(mapStateToProps, null)

來源

2017-08-12 09:50:33 MartinElvar

阿波羅似乎刷新了，當狀態映射到道具時，我該如何防止它？

回答

相關問題