基于数组 object 键值需要 setState

Question

我有 React 错误字段，我将在屏幕上显示。

this.state = {
    errorMerchantid: '',
    errorPassword: '',
    errorRePassword: '' 
}

错误字段将是动态的。 它可能如下所示

err.response.data={
    merchantID: 'merchant id error'
}

在上述情况下，我有一个字段错误，即商家 ID，然后我需要像下面这样设置状态。

this.setState ({errorMerchantid: err.response.data.merchantID })

或者

err.response.data={
    merchantID: 'merchant id error',
    password: 'invalid password'
}

在上述情况下，我有 2 个字段错误，即商家 ID 和密码，然后我需要像下面这样设置状态

 this.setState ({errorMerchantid: err.response.data.merchantID, 
                 errorPassword: err.response.data.errorPassword})

或者

err.response.data={
    merchantID: 'merchant id error',
    password: 'invalid password',
    repassword: 'invalid re-entered password'
}

在上述情况下，我有 3 个字段错误，即商家 ID、密码和重新密码，然后我需要像下面这样设置状态。

 this.setState ({errorMerchantid: err.response.data.merchantID, 
                  errorPassword: err.response.data.errorPassword, 
                  repassword: err.response.data.repassword  })

Answer 1

您可以使用 state 的更新创建 object，并有条件地填充它

 // err.response.data const {merchantID,password,repassword} = err.response.data; const errors = {}; if (merchantID){ errors.errorMerchantid = merchantID; } if (password){ errors.errorPassword = password; } if (merchantID){ errors.errorRePassword = repassword; } this.setState(errors);

---

如果您每次都需要重置其他错误，那么您可以这样做

 // err.response.data const {merchantID,password,repassword} = err.response.data; const errors = { errorMerchandId: merchantID || '', errorPassword: password || '', errorRePassword: repassword || '' }; this.setState(errors);

请记住，您需要与 state 属性的大小写保持一致，因为它们区分大小写。