是否有可能更新对象的属性与setState?

喜欢的东西:

this.state = {
   jasper: { name: 'jasper', age: 28 },
}

我试过:

this.setState({jasper.name: 'someOtherName'});

这:

this.setState({jasper: {name: 'someothername'}})

第一个会导致语法错误,第二个则什么都不做。什么好主意吗?


当前回答

这个设置对我来说很管用:

let newState = this.state.jasper;
newState.name = 'someOtherName';

this.setState({newState: newState});

console.log(this.state.jasper.name); //someOtherName

其他回答

同样,按照Alberto Piras解决方案,如果你不想复制所有的“state”对象:

handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let jasperCopy = Object.assign({}, this.state.jasper);
    jasperCopy[inputName].name = inputValue;

    this.setState({jasper: jasperCopy});
  }

这个设置对我来说很管用:

let newState = this.state.jasper;
newState.name = 'someOtherName';

this.setState({newState: newState});

console.log(this.state.jasper.name); //someOtherName

在功能组件中使用钩子:

const [state, setState] = useState({jasper: { name: 'jasper', age: 28 }})
const nameChangeHandler = () => {
      setState(prevState => ({
            ...prevState,
            prevState.jasper.name = "Anurag",
            prevState.jasper.age = 28
      })
    )
}

在这些情况下,建议使用基于回调的方法来更新状态,因为使用这种方法可以确保之前的状态被完全更新,并且我们正在基于之前更新的状态进行更新。

这是最快和最易读的方式:

this.setState({...this.state.jasper, name: 'someothername'});

即使this.state.jasper已经包含了name属性,也会使用新名称name: 'someothername'。

创建一个状态对象

this.state = {
  objName: {
    propertyOne: "",
    propertyTwo: ""
  }
};

使用setState更新状态

this.setState(prevState => ({
  objName: {
    ...prevState.objName,
    propertyOne: "Updated Value",
    propertyTwo: "Updated value"
  }
}));