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 });
}

對於嵌套的每個對象或數組，您需要創建一個副本，更改副本，然后用副本替換原始對象。