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 Text Box看起来像这样：

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

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

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

1 个答案: