React Native：null 不是对象（评估 '_this.state.displayErrors'）

Question

我有一个功能齐全的 Android 应用程序，现在我收到此错误：

null is not an object (evaluating '_this.state.displayErrors') 在这里引用了这行代码：

_getErrors = () => {
    if (this.state.displayErrors) {
      return {
        ...this.state.validationErrors,
        ...this.props.validationErrors
      };
    }
    return {};
  };

这是完整的文件：

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import DetailsConfirmationForm from "auth/components/DetailsConfirmationForm";
import {
  firstNameChanged,
  lastNameChanged,
  prefixChanged,
  suffixChanged,
  stateChanged
} from "auth/registrationActions";
import regex from "utils/helpers/regex";
import { prefixes, suffixes } from "enums/dropdownOptions";

export class DetailsConfirmation extends Component {
  static propTypes = {
    firstName: PropTypes.string,
    firstNameChanged: PropTypes.func.isRequired,
    lastName: PropTypes.string,
    lastNameChanged: PropTypes.func.isRequired,
    navigation: PropTypes.object,
    prefix: PropTypes.string,
    prefixChanged: PropTypes.func.isRequired,
    registeredUser: PropTypes.object,
    state: PropTypes.string,
    stateChanged: PropTypes.func.isRequired,
    suffix: PropTypes.string,
    suffixChanged: PropTypes.func.isRequired,
    validationErrors: PropTypes.object
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { personalDetails, personalAddress } = this.props.registeredUser;
    console.log(this.props.registeredUser);
    if (personalDetails) {
      this.props.firstNameChanged(personalDetails.firstName);
      this.props.lastNameChanged(personalDetails.lastName);
      this.props.suffixChanged(personalDetails.suffix);
      this.props.prefixChanged(personalDetails.prefix);
    }

    if (personalAddress && personalAddress.stateCode) {
      this.props.stateChanged(personalAddress.stateCode);
    }

    const { params = {} } = this.props.navigation.state;
    const { displayAlert = true } = params;

    this.state = {
      validationErrors: {},
      displayErrors: false,
      titleName: personalDetails && personalDetails.firstName,
      displayAlert
    };
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.displayErrors) {
      this._validate(nextProps);
    }
  }

  _validate = props => {
    const { prefix, state, firstName, lastName, suffix } = props;
    const validPrefixes = prefixes.map(p => p.value);
    const validSuffixes = suffixes.map(p => p.value);
    const validationErrors = {
      prefix:
        prefix && prefix.trim() && validPrefixes.includes(prefix)
          ? ""
          : "Is Required",
      state: state && state.trim() ? "" : "Is Required",
      firstName: firstName && firstName.trim() ? "" : "Is Required",
      lastName: lastName && lastName.trim() ? "" : "Is Required",
      suffix:
        !suffix || validSuffixes.includes(suffix) ? "" : "Select an option"
    };

    const nameRegexErrorMessage =
      "Only letters, hyphens and periods are allowed.";
    if (validationErrors.firstName === "" && !regex.userName.test(firstName)) {
      validationErrors.firstName = nameRegexErrorMessage;
    }
    if (validationErrors.lastName === "" && !regex.userName.test(lastName)) {
      validationErrors.lastName = nameRegexErrorMessage;
    }

    const fullErrors = {
      ...validationErrors,
      ...this.props.validationErrors
    };

    const isValid = Object.keys(fullErrors).reduce((acc, curr) => {
      if (fullErrors[curr] !== "") {
        return false;
      }

      return acc;
    }, true);

    if (isValid) {
      this.setState({ validationErrors: {} });
      //register
    } else {
      this.setState({ validationErrors, displayErrors: true });
    }

    return isValid;
  };

  _navigate = () => {
    const isValid = this._validate(this.props);
    if (isValid) {
      if (this.props.registeredUser.organization) {
        this.props.navigation.navigate("CompleteAccount");
      } else {
        this.props.navigation.navigate("AskForMembership");
      }
    }
  };

  _getErrors = () => {
    if (this.state.displayErrors) {
      return {
        ...this.state.validationErrors,
        ...this.props.validationErrors
      };
    }
    return {};
  };

  render() {
    return (
      <DetailsConfirmationForm
        {...this.state}
        {...this.props}
        navigate={this._navigate}
        validationErrors={this._getErrors()}
      />
    );
  }
}

const mapsStateToProps = ({ registrations }) => {
  return {
    ...registrations.accountData,
    validationErrors: registrations.validationErrors,
    registeredUser: registrations.registeredUser
  };
};

export default connect(
  mapsStateToProps,
  {
    firstNameChanged,
    lastNameChanged,
    prefixChanged,
    suffixChanged,
    stateChanged
  }
)(DetailsConfirmation);

这是一个范围问题吗？ if 语句在_getErrors 函数之外无权访问displayErrors？如果是这样，这在之前的几个星期里到底是怎么做到的？

我试过放置：

this.state = {
   validationErrors: {},
   displayErrors: false,
   titleName: personalDetails && personalDetails.firstName,
   displayAlert
};

在 constructor(props) 函数中，我相信这是属于的，但随后我遇到了很多关于其中变量的其他问题，例如 personalDetails 和 displayAlert 没有被定义为变量。最大的痛苦是displayAlert。

Answer 1

要在构造函数中设置this.state，您需要解构props 以获得类似于componentDidMount 中发生的值。我会从componentDidMount 中完全删除初始状态值的设置。

constructor(props) {
    super(props);
    const { personalDetails, personalAddress } = props.registeredUser;
    const { params = {} } = props.navigation.state;
    const { displayAlert = true } = params;

    this.state = {
      validationErrors: {},
      displayErrors: false,
      titleName: personalDetails && personalDetails.firstName,
      displayAlert
    };
  }

  componentDidMount() {
    const { personalDetails, personalAddress } = this.props.registeredUser;
    console.log(this.props.registeredUser);
    if (personalDetails) {
      this.props.firstNameChanged(personalDetails.firstName);
      this.props.lastNameChanged(personalDetails.lastName);
      this.props.suffixChanged(personalDetails.suffix);
      this.props.prefixChanged(personalDetails.prefix);
    }

    if (personalAddress && personalAddress.stateCode) {
      this.props.stateChanged(personalAddress.stateCode);
    }
  }

我不确定这是否能解决您的问题，或者 this.state 是如何设置为 null 的。

Answer 2

我认为问题出在 DetailsConfirmationForm 组件中的这一行

validationErrors={this._getErrors()}

您正在调用函数而不是传递。

试试这个

validationErrors={this._getErrors}