Question

我正在尝试从值数组中设置组件的状态。

我在filtersSelected数组->

上具有这些值

["name", "date", "state"]

我想将这些值设置为我的状态

myState = {
...etc,
name: null,
date: null,
state: null
}

我尝试使用

this.setState(previousState => ({
  ...previousState,
  ...filtersSelected: null
}))

显然不起作用。有人可以帮我吗？

Answer 1

为了将数组扩展为对象，首先需要将数组转换为对象，然后可以将对象键扩展为状态：

this.setState((prevState) => ({
    ...prevState,
    ...filtersSelected.reduce(function(acc, item) {
        return Object.assign(acc, {[item]: null})
    }, {});
}))

Answer 2

这里有几件事要注意。首先，当您调用setState时，不需要提供所有先前的状态。 setState“合并”您传递到已存在状态的特定状态属性。

当您尝试使用spread时，使过滤器选择的数组成为对象也可能会有所帮助，但这绝不是必需的。如果要保留数组，可以使用下面的代码。

let filtersSelected = ["name", "date", "state"];
this.setState({name: filtersSelected[0], date: filtersSelected[1], state: filtersSelected[2]});

或者，如果您将filtersSelected做成一个对象（我强烈建议这样做），则可以执行以下操作：

let filtersSelected = {name: "name", date: "date", state: "state"};
this.setState(filtersSelected);

Answer 3

首先将数组转换为对象，然后使用循环为新创建的对象分配值。

let filteredSelected = ["name", "date", "state"];
let obj;

for(let i of filteredSelected){
    obj[i] = null;
}

this.setState(previousState => ({
  ...previousState,
  obj
}))

Answer 4

每个人都有他自己的方式，这是我喜欢的一些方式

  let data = ["name", "date", "state"];
  Object.values(data).map(i => this.setState({ [i]: null }))

但是我不喜欢为每个元素迭代setState

  let data = Object.assign({}, ...["name", "date", "state"].map((prop) => ({[prop]: null})))
  this.setState(data)

或者您可以这样做

this.setState(["name", "date", "state"].reduce( ( accumulator, currentValue ) => ({...accumulator,[ currentValue ]: null}), {} ));

如何从React中的数组创建状态属性？

4 个答案: