时间戳

首页 > 解决方案 > React.js this.props.user 在 componentDidMount 中始终为 null

javascript - React.js this.props.user 在 componentDidMount 中始终为 null

问题描述

我有一个用户删除表单，它引导用户创建一些将在后端讨论的票，但正如我所见，在创建票后我想更改一些返回模式，而不是我想要的表单要返回一个简单的文本，但我无法得到我的this.props.user内部componentDidMount，我从 redux 中获取状态。这是我的代码：

import React from 'react';
import { connect } from 'react-redux';
import { MdDeleteSweep } from 'react-icons/md';
import {
  Container,
  Title,
  Span,
  DangerSpan,
  Desc,
  Form,
  FieldLabel,
  TextField,
  Field,
  Btn,
} from './elements/Delete';

import { delete_request } from '../../actions/auth';

class AccountDelete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      desc: '',
      ticketCreated: false,
    };

    this.onChange = this.onChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  handleClick(e) {
    e.preventDefault();
    this.props.delete_request(this.state.email);
    this.setState({ ticketCreated: true });
  }

  componentDidMount() {
    console.log(this.props);
    if (!this.props.user) return null;

    let delres = this.props.user.del_request[0];
    if (delres) {
      this.setState({ ticketCreated: true });
    }
  }

  render() {
    const { user } = this.props;
    if (!user) return null;

    return (
      <Container>
        <div style={{ marginBottom: '1rem' }}>
          <Title>
            <MdDeleteSweep /> <DangerSpan>Delete</DangerSpan> Your Account
          </Title>
          <Desc>
            You can submit your Winteka Account for deletion at any time. If you
            change your mind, you might not be able to recover it.
          </Desc>
        </div>
        {this.state.ticketCreated ? (
          <Desc>
            <DangerSpan>*</DangerSpan> You have already <b>opened a request</b>,
            please check your <b>e-mail address</b> for more information. For
            any questions please <b>Contact Us</b>.
          </Desc>
        ) : (
          <Form>
            <FieldLabel>
              <DangerSpan>*</DangerSpan> Your <Span>active email address</Span>
            </FieldLabel>
            <Field
              type="email"
              name="email"
              placeholder={user.email}
              value={this.state.email}
              onChange={this.onChange}
            />
            <FieldLabel>
              <DangerSpan>*</DangerSpan> Your <Span>current password</Span>
            </FieldLabel>
            <Field
              type="password"
              name="password"
              value={this.state.password}
              onChange={this.onChange}
            />
            <FieldLabel>
              Describe <Span>your problem</Span>
            </FieldLabel>
            <TextField
              rows="3"
              name="desc"
              value={this.state.desc}
              onChange={this.onChange}
            />
            <Btn onClick={this.handleClick}>Submit Application</Btn>
          </Form>
        )}
      </Container>
    );
  }
}

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

export default connect(mapStateToProps, { delete_request })(AccountDelete);

这就是里面this.props的componentDidMount

标签： javascriptreactjsredux

解决方案

1.为什么需要this.props.user内部componentDidMount？

似乎您没有必要this.setState({ ticketCreated: true })在两者内部复制调用componentDidMount， handleClick但是将其放入内部就足够了， handleClick这样您就可以删除componentDidMount块。

如果你想在 become 时引入副作用 或执行回调，你应该，ticketCreatedtrue

a) 使用componentDidUpdate生命周期钩子，或者，

b) this.setState(newState, callbackFn)wherecallbackFn在状态更新时执行。

2.你得到的错误，

警告：失败的道具类型：component提供给的道具无效Route

表示您使用的是旧版本 ( <4.4.0) react-router-dom。链接到相关的 github 问题。

您可能应该使用以下命令更新软件包，

$ npm install --save react-router-dom

推荐阅读