时间戳

首页 > 解决方案 > 基于数组值 React + ES6 设置状态值

javascript - 基于数组值 React + ES6 设置状态值

问题描述

我有一个状态变量反应为：

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
        )
    }))
})

标签： javascriptreactjsecmascript-6

解决方案

您无法使用地图构建对象。你不想要forEach，因为这里不需要突变。地图适用于（并返回）集合。你应该使用reduce.

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

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

this.setState(state);

推荐阅读