Обновление объекта состояния реакции без setState

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 ({filters: newFilters}), он также обновляет «initialFilters»

Оцените вашу поддержку.

Answer 1

Использование Object.assign вместо _.extend может помочь. mdn

Я заметил, что initialFilters появлялись дважды, если вы не используете initialFilters при рендеринге JSX, просто поместите значения в this.initialFilters, чтобы избежать запуска бессмысленного рендеринга.

Answer 2

Согласно документации Underscore.js, _.extend делает поверхностную копию объекта.Это означает, что все вложенные объекты внутри вашего объекта копируются по ссылке.

Это приводит к изменению объекта элементов фильтра состояния перед использованием метода setState.

Кроме того, вы передаете this.props.filters в initialFilters и фильтруете по ссылке (копирование не происходит).Это означает, что изменение одного из них изменит также другого.

Чтобы избежать этого, вам необходимо создать глубокую копию объекта фильтра.Самый простой способ сделать это - использовать JSON.stringify.

Обратитесь к этой записи для получения дополнительной информации.