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

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