Установка значений состояния на основе значения массива React + ES6

Question

У меня есть переменная состояния, реагирующая как:

this.state = {
    formStatus : {
        approved : true,
        rejected : true,
        pending  : true
    }
}

и динамический массив, значение которого может содержать одно или все из этих значений

appliedFilters = ['approved', 'rejected', 'pending']

Теперь я хочу установить для своих ключей состояния значение false, если массив не содержит их.

Например, если массив ['approved', 'rejected'], то мое состояние должно быть установлено как:

this.state = {
    formStatus : {
        approved : true,
        rejected : true,
        pending  : false
    }
}

Я хочу сделать это, используя ES6 map () , если возможно.

Я сделал что-то подобное, но оно не работает:

appliedFilters.map(filter => {
    this.setState(prevState => ({
        formStatus: prevState.formStatus.map(
            status => (status === filter) ? true : false
        )
    }))
})

Answer 1

Это невозможно Array.prototype.map, потому что функция map возвращает новый массив () ....

Попробуйте сделать это.

const allFilters = ['approved', 'rejected', 'pending'];
const appliedFilters = ['approved', 'rejected'];

const newState = {};
allFilters.forEach(filter => {
    newState[filter] = appliedFilters.includes(filter);
});

// use!!!
newState;

Answer 2

1. Вы не можете позвонить .map на prevState.formStatus.Это объект, а не массив.
2. Избегайте вызова this.setState на каждой итерации .map.

Вы можете просто подумать:

this.setState(prevState => ({
  formStatus: Object
    .keys(prevState.formStatus)
    .reduce((acc, stat) => ({ ...acc, [stat]: appliedFilters.includes(stat) }), {}) 
}))

Answer 3

Вы не можете построить объект, используя карту.И вы не хотите forEach, потому что здесь нет необходимости в мутации.Карты работают (и возвращают) коллекции.Вы должны использовать reduce.

const appliedFilters = ['approved', 'rejected']

const state = ['approved', 'rejected', 'pending'].reduce((newState, item) => ({
    ...newState,
    [item]: appliedFilters.includes(item)
}), {});

this.setState(state);