javascript - 根据数组值设置状态值 React + ES6

Question

我的 react 中有一个状态变量:

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

您无法使用 map 构建对象。而且您不需要 forEach 因为这里不需要突变。 map 适用于(并返回)集合。您应该使用reduce。

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

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

this.setState(state);