根据数组值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

您无法使用地图构建对象。你不想要forEach，因为这里不需要变异。地图处理（和返回）集合。你应该使用reduce。

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

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

this.setState(state);

Answer 2

这是不可能的Array.prototype.map，因为map函数返回新的Array（）....

试试这个。

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

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

// use!!!
newState;

Answer 3

1. 你不能在.map上打电话给prevState.formStatus。它是一个对象，而不是数组。
2. 避免在this.setState的每次迭代中调用.map。

您可以考虑简单地这样做：

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