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

Question

所有代码均在我的问题和解释下方。

所以我想做的是更新祖父母类中的状态，这样做是出于处理文件的原因，我也在文本框中使用了Material-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: '',
          },
        ],
      },
    ],
  },
};

我知道它的时间很长，但是那是因为它出错，因为Mui文本框不喜欢加载时的空值。

这就是即时消息如何更改状态，但是将其作为状态的顶级值添加到状态，我希望它明显替换人内部的值。 此功能与状态明显在同一类中

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

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

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

TL：DR：如何在状态下更新正确的值

Answer 1

我知道它的时间很长，但是那是因为它出错，因为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 });
}

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