javascript - 无法读取未定义的属性“错误”（redux，react）

Question

我目前正在开发一个社交应用程序。我尝试了很多不同的传递参数的方法。任何帮助表示赞赏...代码如下

在这里，我在 componentWillReceiveProps 中遇到了 nextProps 的一些问题

我在反应中从经典组件转换为功能组件

在经典组件中，nextProps 实际上也可以使用

class signIn extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: "",
      errors: {},
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.UI.errors) {
      this.setState({ errors: nextProps.UI.errors });
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();

    this.setState({
      loading: true,
    });
    const userData = {
      email: this.state.email,
      password: this.state.password,
    };

    this.props.SignInUserAction(userData, this.props.history);
  };

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  render() {
    const {
      classes,
      UI: { loading },
    } = this.props;
    const { errors } = this.state;
    return (
        ....
    );

但它在功能组件中不起作用。

错误：无法读取未定义的属性“错误”。

const SignIn = ({ classes, UI: { loading } }) => {
  // const { email, password, errors, handleSubmit, handleChange } = userSignIn();

  const history = useHistory();
  const [input, setInput] = useState({ email: "", password: "" });
  const [errors, setErrors] = useState({});

  useEffect(() => {
    componentWillReceiveProps(errors);
  }, [errors]);

  const handleSubmit = (event) => {
    if (event) event.preventDefault();

    const userData = { email: input.email, password: input.password };

    SignInUserAction(userData, history);
  };

  const handleChange = (event) => {
    const { target } = event;
    const { name, value } = target;
    setInput({...value,  [name]: value });
  };

  const componentWillReceiveProps = (nextProps) => {
    if (nextProps.UI.errors) {
      setErrors({ errors: nextProps.UI.errors });
    }
  };

  return (
    ...
  )
};

SignIn.propTypes = {
  classes: PropTypes.object.isRequired,
  signInUserAction: PropTypes.func.isRequired,
  user: PropTypes.func.isRequired,
  UI: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  user: state.user,
  UI: state.UI,
});

const mapActionsToProps = { SignInUserAction };

export default connect(
  mapStateToProps,
  mapActionsToProps
)(withStyles(theme.styles)(SignIn));

标签： javascriptreactjs

Answer 1

您正在传递errors状态而不是任何实际的道具值。据我所知，您似乎应该将UI道具传递给您的componentWillReceiveProps实用程序。

const SignIn = ({ classes, UI }) => {
  // const { email, password, errors, handleSubmit, handleChange } = userSignIn();

  ...
  const [errors, setErrors] = useState({});

  useEffect(() => {
    componentWillReceiveProps(UI);
  }, [UI]);

  ...

  const componentWillReceiveProps = (uiProp) => {
    if (uiProp?.errors) {
      setErrors({ errors: uiProp.errors });
    }
  };

  return (
    ...
  )
};

SignIn.propTypes = {
  classes: PropTypes.object.isRequired,
  signInUserAction: PropTypes.func.isRequired,
  user: PropTypes.func.isRequired,
  UI: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  user: state.user,
  UI: state.UI,
});

const mapActionsToProps = { SignInUserAction };

export default connect(
  mapStateToProps,
  mapActionsToProps
)(withStyles(theme.styles)(SignIn));