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

喜欢的东西:

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

我试过:

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

这:

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

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


当前回答

不使用异步和等待使用此…

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

如果你使用异步和等待使用这个…

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

其他回答

你的第二种方法不起作用,因为{name: 'someothername'}等于{name: 'someothername',年龄:undefined},所以undefined会覆盖原始的年龄值。

当涉及到改变嵌套对象的状态时,一个很好的方法是Immutable.js

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

const {jasper} = this.state
this.setState({jasper: jasper.set(name, 'someothername')})

试试这个,应该没问题

this.setState(Object.assign(this.state.jasper,{name:'someOtherName'}));

使用钩子,我们可以做到以下方式

const [student, setStudent] = React.useState({name: 'jasper', age: 28});
 setStudent((prevState) => ({
          ...prevState,
          name: 'newName',
        }));

在更新对象的情况下,键是字符串

例如,你的状态对象是

serviceDays: {
    Sunday: true,
    Monday: true,
    Tuesday: false,
    Wednesday: true,
    Thurday: false,
    Friday: true,
    Saturday: true
  }

所以你可以通过以下方式更新

const onDayClick = day => {
  const { serviceDays } = this.state
  this.setState(prevState => ({
    serviceDays: {
      ...prevState.serviceDays,
      [day]: serviceDays[day] ? false : true
    }
  }))
}

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

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

this.setState({newState: newState});

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