Question

我正在尝试覆盖某些状态存储的错误标签，但是我无法终生弄清楚为什么它不覆盖我提供的密钥：

if(this.state.viewState === 'STEP_1') {
  if (!this.isValidAmount(totalAmountPaid.value)) {
    totalAmountPaid.errorLabel = 'Incorrect Amount';
    this.setState({
      totalAmountPaid,
      errorLabel: 'invalid or missing total amount'
    });
    return;
  };

  if (!this.isValidAmount(amountToBeClaimed.value)) {
    amountToBeClaimed.errorLabel = 'Incorrect Amount';
    console.log('invalidClaimAmount');
    this.setState({
      amountToBeClaimed,
      errorLabel: 'invalid or missing claim amount'
    });
    return;
  };

  if(amountToBeClaimed.value > totalAmountPaid.value) {
    this.setState({ errorLabel: 'claims cannot be greater than total amount paid' });
    return;
  };

  this.setState({ ...this.state, errorLabel: 'asdads' })
};

除了最后一个调用之外，所有setState调用都有效

this.setState({ ...this.state, errorLabel: 'asdads' })

任何帮助表示赞赏！

EDIT 如果我在它的末尾添加一个return语句，则setState可以工作，但是，当然，不会让我继续

if(this.state.viewState === 'STEP_1') {
  if (!this.isValidAmount(totalAmountPaid.value)) {
    totalAmountPaid.errorLabel = 'Incorrect Amount';
    this.setState({
      totalAmountPaid,
      errorLabel: 'invalid or missing total amount'
    });
    return;
  };

  if (!this.isValidAmount(amountToBeClaimed.value)) {
    amountToBeClaimed.errorLabel = 'Incorrect Amount';
    console.log('invalidClaimAmount');
    this.setState({
      amountToBeClaimed,
      errorLabel: 'invalid or missing claim amount'
    });
    return;
  };

  if(amountToBeClaimed.value > totalAmountPaid.value) {
    console.log('in amount greater than total if')
    this.setState({ errorLabel: 'claims cannot be greater than total amount paid' });
    return;
  };

  this.setState({ ...this.state, errorLabel: '' });
  return;
};

*整个代码片段*

  goToNext = () => {
const { totalAmountPaid, amountToBeClaimed } = this.state.inputs;

if(this.state.viewState === 'ADD_RECEIPT' && this.state.receiptedAdded === true) {
  console.log('in add receipt if')
  let newState = this.state;
  this.setState({
    ...newState,
    viewState: 'STEP_2',
    header: 'Enter Item Details',
    subHeader: "For each item we'll need further information.",
    isFormCompleted: {
      STEP_1: true,
      STEP_2: false
    },
    errorLabel: 'sdadasds'
  }, () => this.saveClaim('STEP_1'));
} else if (this.state.viewState === 'ADD_RECEIPT' && this.state.receiptedAdded === false) {
  this.selectReceipt();
};

if(this.state.viewState === 'STEP_1') {
  if (!this.isValidAmount(totalAmountPaid.value)) {
    totalAmountPaid.errorLabel = 'Incorrect Amount';
    this.setState({
      totalAmountPaid,
      errorLabel: 'invalid or missing total amount'
    });
    return;
  };

  if (!this.isValidAmount(amountToBeClaimed.value)) {
    amountToBeClaimed.errorLabel = 'Incorrect Amount';
    console.log('invalidClaimAmount');
    this.setState({
      amountToBeClaimed,
      errorLabel: 'invalid or missing claim amount'
    });
    return;
  };

  if(amountToBeClaimed.value > totalAmountPaid.value) {
    console.log('in amount greater than total if')
    this.setState({ errorLabel: 'claims cannot be greater than total amount paid' });
    return;
  };

  // //doesnt work????
  // if(amountToBeClaimed.value > this.props.accountBalance) {
  //   this.setState({ errorLabel: 'claims cannot be greater than total account balance' });
  //   return;
  // };

  this.setState({ errorLabel: '' });
};

if(this.state.viewState === 'STEP_2') {
  console.log('in step 2 if');
  if(this.state.inputs.itemOneMajorCategory.value === '') {
    this.setState({ errorLabel: 'Please choose an item category' });
    return;
  };
  if(this.state.inputs.itemOneDocumentaryEvidence.value === '') {
    this.setState({ errorLabel: 'Please provide documentary evidence' });
    return;
  };
  this.setState({ errorLabel: '' });
};

switch (this.state.viewState) {
  case 'STEP_1': 
    let newState = this.state;
    newState.inputs.numberOfItems.value = 1; //for Stage we are doing one item only
      const item = `item${inWords(newState.inputs.numberOfItems.value, 'startCase')}`;
      newState.inputs[`${item}PersonName`] = {
        type: 'generic',
        displayValue: this.props.personFullName,
        value: this.props.personGuid
      };
      newState.inputs[`${item}MajorCategory`] = {
        //optional: true,
        type: 'generic',
        value: '',
        displayValue: '',
        claimCategoryType: ''
      };
      newState.inputs[`${item}ClaimHealthItemGuid`] = {
        optional: true,
        type: 'generic',
        value: '',
        displayValue: '',
      };
      newState.inputs[`${item}AmountPaid`] = {
        //optional: true,
        type: 'generic',
        value: '$',
        formatter: 'currency-new'
      };
      newState.inputs[`${item}DocumentaryEvidence`] = {
        optional: true,
        type: 'generic',
        value: '',
        displayValue: 'Documentary Evidence',
        rightImage: Images.addReceipt
      };
    this.setState({
      ...newState,
      viewState: 'ADD_RECEIPT',
      header: 'Enter Item Details',
      subHeader: "For each item we'll need further information.",
      isFormCompleted: {
        STEP_1: true,
        STEP_2: false
      },
      errorState: false,
    }, () => this.saveClaim('STEP_1'));
    break;
  case 'STEP_2':
    if (!this.hasUserSelectedCheckbox) {
      return;
    }
    /*this.setState({
      viewState: 'STEP_3',
      header: 'Review',
      subHeader: 'If all looks good, submit for adjudication.',
      isFormCompleted: {
        STEP_1: true,
        STEP_2: true
      }
    });*/
    this.saveClaim('STEP_2');
    break;
  case 'STEP_3':
    if (!this.hasUserSelectedCheckbox) {
      return;
    }
    this.saveClaim('STEP_3');
    Actions.claimSubmissionEnd({inputs: this.state.inputs});
    break;
  case 'STEP_4':  
    if (!this.hasUserSelectedCheckbox) {
      return;
    }
    this.saveClaim('STEP_4');
    Actions.claimSubmissionEnd({inputs: this.state.inputs});
    break;
}

};

Answer 1

如果要使用this.state更新状态，请尝试使用setState回调：

press

this.setState是否不覆盖旧状态？

1 个答案: