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

喜欢的东西:

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

我试过:

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

这:

this.setState({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')})

其他回答

舰队指挥官:样品

   const [formData, setformData] = useState({
           project_admin_permissions: {
              task_forms: false,
              auto_assign_rules: false,
              project_notes: true,
              alerts: false,
              update_criteria: true,
              project_flow: false,
              reports: false,
            }
        
          })
    
     const handleChangeCheckBox = (e) => {
       setformData({
          ...formData, project_admin_permissions: { ...formData.project_admin_permissions, [e.target.name]: e.target.checked }
    
        })
      }

我用了这个方法。

如果你有一个这样的嵌套状态:

this.state = {
  formInputs:{
    friendName:{
      value:'',
      isValid:false,
      errorMsg:''
    },
    friendEmail:{
      value:'',
      isValid:false,
      errorMsg:''
    }
  }
}

你可以声明handleChange函数来复制当前状态并重新赋值

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

    let statusCopy = Object.assign({}, this.state);
    statusCopy.formInputs[inputName].value = inputValue;

    this.setState(statusCopy);
  }

这里是带有事件侦听器的HTML。确保使用与状态对象相同的名称(在本例中为'friendName')

<input type="text" onChange={this.handleChange} " name="friendName" />

你的第二种方法不起作用,因为{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')})

同样,按照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});
  }

第一种情况确实是语法错误。

因为我看不到组件的其余部分,所以很难理解为什么要在这里的状态中嵌套对象。在组件状态下嵌套对象不是一个好主意。尝试将初始状态设置为:

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

这样,如果你想要更新名称,你可以调用:

this.setState({
  name: 'Sean'
});

这能达到你的目标吗?

对于更大、更复杂的数据存储,我会使用Redux之类的东西。但这要高级得多。

关于组件状态的一般规则是只使用它来管理组件的UI状态(例如,活动,计时器等)。

看看这些参考资料:

https://facebook.github.io/react/docs/react-component.html#state https://facebook.github.io/react/docs/state-and-lifecycle.html