状态不会以空字符串更新

Question

因此，当我将地址字段从随机指定的地址更新为空地址时，状态不会更新为空。这似乎是问题所在？我无法解决此问题。我认为也许带有setAddress（）或toggleEdit（）的东西可能是问题的原因。也许有人可以帮忙解决这个问题？

import PropTypes from 'prop-types';
import styled from 'styled-components';
import { getFormValues, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import addMissingCartProps from 'utils/addMissingCartProps';
import AddressSearch from '../../AddressSearch';
import WhiteButton from '../WhiteButton';
import { Heading, Container } from '../GPSearch/components/Display';
import styles from '../../AddressSearch/styles.modules.scss';

const FORM_NAME = 'personalDetails';
const FORM_TYPE = 'PersonalDetails';

export class AddressLookup extends Component {
  constructor(props) {
    super(props);
    const { formValues, fieldKey } = this.props;
    this.state = {
      edit: !formValues || !formValues[fieldKey]
    };
  }

  componentDidUpdate({ formValues: prevFormValues }, { edit }) {
    const { formValues, fieldKey, clearValidationError } = this.props;
    if (
      edit &&
      formValues[fieldKey] &&
      formValues[fieldKey] !== prevFormValues[fieldKey]
    ) {
      clearValidationError(fieldKey);
      this.setState({ edit: false });
    }
  }

  toggleEdit = edit => {
    const { change, id } = this.props;
    change(`${FORM_TYPE}AddressSearch${id}`, '');
    this.setState({ edit });
  };

  normaliseAddress = ({
    BuildingNumber: buildingNumber,
    BuildingName: buildingName,
    Block: block,
    Company: company,
    Department: department,
    District: district,
    Neighbourhood: neighbourhood,
    POBoxNumber: poBoxNumber,
    SecondaryStreet: secondaryStreet,
    SubBuilding: flatName,
    Street: street,
    City: city,
    Province: county,
    PostalCode: postalCode,
    CountryIso2: country
  }) => ({
    flatName,
    buildingNumber,
    buildingName: company || department || poBoxNumber || buildingName,
    streetName: secondaryStreet || street,
    localityName: block || neighbourhood || district,
    city,
    county,
    postalCode,
    country,
    validFlag: true
  });

  formatAddress = address => {
    const {
      streetName,
      buildingName,
      localityName,
      city,
      postalCode,
      buildingNumber,
      flatName
    } = address;
    const line1 = [buildingNumber, streetName].join(' ');
    return [flatName, buildingName, line1, localityName, city, postalCode];
  };

  setAddress = address => {
    const {
      formValues,
      dependency,
      change,
      fieldKey,
      clearValidationError
    } = this.props;
    clearValidationError(fieldKey);
    this.setState({ edit: false });
    const normalisedAddress = addMissingCartProps(
      this.normaliseAddress(address)
    );
    change(fieldKey, normalisedAddress);
    if (dependency && !formValues[dependency]) {
      change(dependency, normalisedAddress);
      clearValidationError(dependency);
    }
  };

  edit() {
    const { id, heading, addressType } = this.props;
    return (
      <SearchContainer data-testid={`address-lookup--personal-details--${id}`}>
        <label htmlFor={`${FORM_TYPE}${id}`}>{heading}</label>
        <AddressSearch
          hideManualAddress
          label={heading}
          placeholder="Enter your postcode"
          formType={FORM_TYPE}
          id={id}
          callback={this.setAddress}
          disableSubmit
          debounce
          addressType={addressType}
        />
      </SearchContainer>
    );
  }

  display() {
    const { formValues, fieldKey, heading } = this.props;
    const address = formValues[fieldKey];
    return address ? (
      <DisplayContainer>
        <Heading>{heading}</Heading>
        <p>
          {this.formatAddress(address).map(
            item =>
              item && (
                <Fragment key={item}>
                  {item}
                  <br />
                </Fragment>
              )
          )}
        </p>
        <WhiteButton
          onClick={() => this.toggleEdit(true)}
          buttonText="Change"
          overrideStyles="small-button"
        />
      </DisplayContainer>
    ) : null;
  }

  render() {
    const { edit } = this.state;
    const { validationError } = this.props;

    return (
      <OuterContainer>
        {edit ? this.edit() : this.display()}
        {validationError && (
          <ErrorMessage>Please complete this field.</ErrorMessage>
        )}
      </OuterContainer>
    );
  }
}

AddressLookup.propTypes = {
  fieldKey: PropTypes.string.isRequired,
  formValues: PropTypes.shape({}).isRequired,
  change: PropTypes.func.isRequired,
  id: PropTypes.string.isRequired,
  validationError: PropTypes.bool
};

AddressLookup.defaultProps = {
  validationError: false
};

const mapStateToProps = state => ({
  formValues: getFormValues(FORM_NAME)(state)
});

export default connect(mapStateToProps)(
  reduxForm({ form: FORM_NAME })(AddressLookup)
);```

Answer 1

我认为是因为compontentDidUpdate中的原因>

if (
  edit &&
  formValues[fieldKey] &&
  formValues[fieldKey] !== prevFormValues[fieldKey]
) {
它永远不会被触发，因为formValues[fieldKey]为空时不满足第二个条件。

如果您在setAddress中而不是通过componentDidUpdate这样的功能中进行检查，会更好，>