Javascript 如何更改状态中存储的对象的值

所有代码将在我的问题和解释下面

所以我要做的是更新我的状态，这是在一个祖父母类中，这是出于与文件有关的原因，我也在为文本框使用材质UI。 我也在写没有Redux的Redux，因为如果你看到一些奇怪的东西，我就可以

我的祖父母阶级状态如下：

state = {
  value: 0,
  application: {
    ApplicationPK: '',
    Person: [
      {
        PersonPK: '',
        FullName: '',
        TitleFK: '',
        Forename: '',
        MiddleNames: '',
        Surname: '',
        DateOfBirth: '',
        HomeTelephone: '',
        MobileTelephone: '',
        EmailAddress: '',
        LoanPurposeFK: '',
        MaritalStatusFK: '',
        Addresses: [
          {
            FlatNumber: '',
            BuildingName: '',
            BuildingNumber: '',
            Street: '',
            District: '',
            Town: '',
            County: '',
            Postcode: '',
            ResidentialStatusFK: '',
            DateMovedIn: '',
            IsCurrentAddress: '',
            AddressPK: '',
          },
        ],
        Employment: [
          {
            EmploymentStatusFK: '',
            Employer: '',
            JobTitle: '',
            Telephone: '',
            MonthlyPay: '',
            IsPaidByBACS: '',
            PayFrequencyFK: '',
            DayOfMonth: '',
            DayOfWeek: '',
            NextPayDate: '',
            FollowingPayDate: '',
            DateStarted: '',
            Postcode: '',
            EmploymentPK: '',
            Website: '',
          },
        ],
        BankAccount: [
          {
            Name: '',
            Sortcode: '',
            AccountNumber: '',
            IsAccountHolder: '',
            IsJointHolder: '',
            IsSoleAuthoriseDebits: '',
            IsPrimary: '',
            IsActive: '',
            BankAccountPK: '',
          },
        ],
      },
    ],
  },
};

<Input
   defaultValue={this.props.state.application.Person[0].Forename}
   className={classes.input}
   onChange={this.props.handleChangeType}
   name="Forename"
   inputProps={{
     'aria-label': 'Description',
   }}
/>

我知道它很长，但那是因为它出错了，因为mui文本框不喜欢加载空值

这就是我现在改变状态的方式，但它在状态的顶层将其作为一个值添加，我希望它能够很明显地替换person内部的值。这个函数与state在同一个类中

 handleChangeType = event => {
   this.setState({ [event.target.name]: event.target.value });
 }

最后，Mui文本框如下所示：

state = {
  value: 0,
  application: {
    ApplicationPK: '',
    Person: [
      {
        PersonPK: '',
        FullName: '',
        TitleFK: '',
        Forename: '',
        MiddleNames: '',
        Surname: '',
        DateOfBirth: '',
        HomeTelephone: '',
        MobileTelephone: '',
        EmailAddress: '',
        LoanPurposeFK: '',
        MaritalStatusFK: '',
        Addresses: [
          {
            FlatNumber: '',
            BuildingName: '',
            BuildingNumber: '',
            Street: '',
            District: '',
            Town: '',
            County: '',
            Postcode: '',
            ResidentialStatusFK: '',
            DateMovedIn: '',
            IsCurrentAddress: '',
            AddressPK: '',
          },
        ],
        Employment: [
          {
            EmploymentStatusFK: '',
            Employer: '',
            JobTitle: '',
            Telephone: '',
            MonthlyPay: '',
            IsPaidByBACS: '',
            PayFrequencyFK: '',
            DayOfMonth: '',
            DayOfWeek: '',
            NextPayDate: '',
            FollowingPayDate: '',
            DateStarted: '',
            Postcode: '',
            EmploymentPK: '',
            Website: '',
          },
        ],
        BankAccount: [
          {
            Name: '',
            Sortcode: '',
            AccountNumber: '',
            IsAccountHolder: '',
            IsJointHolder: '',
            IsSoleAuthoriseDebits: '',
            IsPrimary: '',
            IsActive: '',
            BankAccountPK: '',
          },
        ],
      },
    ],
  },
};

<Input
   defaultValue={this.props.state.application.Person[0].Forename}
   className={classes.input}
   onChange={this.props.handleChangeType}
   name="Forename"
   inputProps={{
     'aria-label': 'Description',
   }}
/>

TL:DR：如何更新状态中的正确值

我知道它很长，但那是因为它出错了，因为mui文本框不喜欢加载空值

为了避免在任何地方初始化一堆空字符串，您只需执行以下操作：

defaultValue={((this.props.state.application || {}).Person[0] || {}).Forename || ""}

---

根据更新正确的状态变量，我将为每个类别使用不同的处理程序。您还必须记住，此处的状态变量是

Person

数组。如果要更新其中的任何内容，需要将新数组传递给状态。最后，您似乎希望能够在

Persons

数组中有多个用户，但您的事件处理程序没有提供要更新字段X或Y的用户的任何信息

例如：

handleChangeType = (userIndex, name, event) => {
  let person = Object.assign({}, this.state.Persons[userIndex]);  //shallow-copy
  person[name] = event.target.value
  this.setState({Person: person });
}

对于嵌套的每个对象或数组，您需要创建一个副本，更改副本，然后用副本替换原始副本

我知道它很长，但那是因为它出错了，因为mui文本框不喜欢加载空值

为了避免在任何地方初始化一堆空字符串，您只需执行以下操作：

defaultValue={((this.props.state.application || {}).Person[0] || {}).Forename || ""}

---

根据更新正确的状态变量，我将为每个类别使用不同的处理程序。您还必须记住，此处的状态变量是

Person

数组。如果要更新其中的任何内容，需要将新数组传递给状态。最后，您似乎希望能够在

Persons

数组中有多个用户，但您的事件处理程序没有提供要更新字段X或Y的用户的任何信息

例如：

handleChangeType = (userIndex, name, event) => {
  let person = Object.assign({}, this.state.Persons[userIndex]);  //shallow-copy
  person[name] = event.target.value
  this.setState({Person: person });
}

---

对于嵌套的每个对象或数组，您需要创建一个副本，更改副本，然后用副本替换原始副本。

谢谢你的帮助，但是我如何设置状态中对象的一个值，因为我一直覆盖整个状态或它位于状态的顶层，所以它不会在框中更新。因此，我需要一个handlechangepersons等，用于每个不同的状态object@andrewwilson,你可以，是的。这里的问题在于数据的结构。这使得正确更新状态有点困难。考虑一下简化结构，如果可能的话，你会说删除应用程序括号，只需要和应用程序在同一个级别上的人一样，可以把变量传递给函数，就像我正在做的或不建议的那样。抱歉，这是一个相当复杂的系统，我在这里写。谢谢你的帮助，但我如何设置状态中对象的一个值，因为我一直覆盖整个状态或它位于状态的顶层，所以它不会在框中更新。因此，我需要一个handlechangepersons等用于每个不同的状态object@andrewwilson你可以，是的。这里的问题在于数据的结构。这使得正确更新状态有点困难。考虑一下简化结构，如果可能的话，你会说删除应用程序括号，只需要和应用程序在同一个级别上的人一样，可以把变量传递给函数，就像我正在做的或不建议的那样。对不起，这是一个相当复杂的系统，我在这里写。