Question

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

和一个动态数组，其值可以包含一个或所有这些值

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

现在，如果阵列中不包含状态键，我想将状态键设置为false。

例如，如果数组为appliedFilters = ['approved', 'rejected', 'pending']，则我的状态应设置为：

['approved', 'rejected']

如果可能的话，我想使用 ES6 map（）来实现。

我已经做了类似的事情，但是没有用：

this.state = {
    formStatus : {
        approved : true,
        rejected : true,
        pending  : 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

您无法在.map上致电prevState.formStatus。这是一个对象，而不是数组。
避免在this.setState的每次迭代中调用.map。

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

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

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

3 个答案: