Question

class FilterMenu extends Component {
constructor(props){
    super(props);
    this.state = { 
        min: 0,
        max: this.getFormatedPrice(this.props.category_maxPrice,false),
        minValue: '',
        maxValue: '',
        searchTerm: '', 
        data: this.props,
        checkedBoxes: [],
        initialFilters: this.props.filters,
        filters: this.props.filters,   

    }
    this.onInputChange      = this.onInputChange.bind(this);
}

onInputChange(event){

    let substr = event.target.value;
    event.preventDefault();

    {(() => {
        var targetFilter = event.target.id;
        var initialFilterItems = this.initialFilters[targetFilter].items;
        var newFilters = _.extend({}, this.state.filters);
        newFilters[targetFilter].items = initialFilterItems.filter(function(item){
            return item.title.toLowerCase().search(event.target.value.toLowerCase()) !== -1;
        })
        this.setState({ filters: newFilters });
    })()}
}

}

我只想更新“过滤器”状态，该状态保存了“ initialFilters”中的一些数据。但是当我使用this.setState（{filter：newFilters}）时，它也在同时更新“ initialFilters”

感谢您的支持。

Answer 1

使用Object.assign代替_.extend可能会有所帮助。 mdn

我注意到initialFilters出现了两次，如果在渲染JSX时不使用initialFilters，只需将值放在this.initialFilters中就可以避免触发无意义的渲染。

Answer 2

根据Underscore.js文档，_。extend对对象进行浅表复制。这意味着对象内的所有嵌套对象都通过引用复制。

这将导致在使用setState方法之前更改状态的过滤器的items对象。

此外，您还将this.props.filters传递给initialFilters和按引用传递的过滤器（不会进行复制）。这意味着更改其中一个将会也更改另一个。

为避免这种情况，您需要创建过滤器对象的深层副本。最简单的方法是使用JSON.stringify。

有关更多信息，请参阅此post。

没有setState的反应状态对象更新

2 个答案: