首页 > 解决方案 > {错误:400,原因:“需要设置用户名或电子邮件”,消息:“需要设置用户名或电子邮件[400]”,错误类型:“Meteor.Error”}

问题描述

我是 ReactJs 的新手,实际上我正在使用向导表单,其中用户将在第 1 步中放置一些数据,在第 1 步中我们可以创建一个用户到数据库,第 2 步我们可以将用户照片上传到服务器但是当我点击下一步时出现此消息。 {error: 400, reason: "Need to set a username or email", message: "Need to set a username or email [400]", errorType: "Meteor.Error"}. 你能帮我看看我在代码中犯了什么错误吗?

我们通过 API 存储我们的数据。

向导表格代码

import React from 'react';
import 'antd/dist/antd.css';
import './WizarStyle.css';
import styled from 'styled-components';
import { Steps, Form, Button, Card } from 'antd';
import RegisterStepOne from '../RegisterStepOne/RegisterStepOne';
import RegisterStepTwo from '../RegisterStepTwo/RegisterStepTwo';
import RegisterStepThree from '../RegisterStepThree/RegisterStepThree';
import RegisterStepFour from '../RegisterStepFour/RegisterStepFour';
const Step = Steps.Step;
const GeneralText = styled.div`
  color: red;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 30px;
  font-family: Lato;
  margin-top: 50px;
  color: #012653;
`;
const ButtonWrapper = styled.div`
  text-align: center;
  margin-top: 26px;
`;
class Wizard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      // user: null,
    };
  }

  steps = [
    {
      title: 'General Information',
      content: (
        <RegisterStepOne
          getFieldDecorator={this.props.form.getFieldDecorator}
        />
      ),
    },
    {
      title: 'Upload Photo',
      content: (
        <RegisterStepTwo
          getFieldDecorator={this.props.form.getFieldDecorator}
        />
      ),
    },
    {
      title: 'Upload Resume',
      content: (
        <RegisterStepThree
          getFieldDecorator={this.props.form.getFieldDecorator}
        />
      ),
    },
    {
      title: 'Add Skills',
      content: (
        <RegisterStepFour
          getFieldDecorator={this.props.form.getFieldDecorator}
        />
      ),
    },
  ];

  next() {
    this.setState(prevState => ({ current: prevState.current + 1 }));
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // this.setState({ user: [this.state.user, values] });
        const userOject = {
          profile: {
            type: 'employee',
            screen: 'Step0',
          },
          ...values,
        };
        fetch('http://138.197.207.41:9000/api/auth/createuser', {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            user: userOject,
          }),
        })
          .then(response => response.json())
          .then(user => {
            if (user.error) {
              console.warn(user);
            } else if (user && user.user) {
              console.warn(user);
              localStorage.setItem('user', JSON.stringify(user.user));
              const modifier = {
                id: user.user._id,
                type: user.user.profile.type,
                profile: {
                  fullName: values.fullName,
                  position: values.lastPosition,
                  username: values.username,
                  location: values.lastPosition,
                  company: values.lastCompany,
                  photo: '',
                  screen: 'Step1',
                },
              };
              fetch(`http://138.197.207.41:9000/api/auth/user/update`, {
                method: 'POST',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  id: user.user._id,
                  modifier,
                }),
              })
                .then(response => response.json())
                .then(res => {
                  if (res.error) {
                    console.warn(res);
                  } else {
                    console.warn(res);
                    this.next();
                  }
                })
                .done();
            }
          });
      }
    });
  };

  prev() {
    this.setState(prevState => ({ current: prevState.current - 1 }));
  }

  getStep = props => this.steps[this.state.current].content;

  render() {
    const { current } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <Card style={{ borderRadius: 10 }}>
        <Form onSubmit={this.handleSubmit}>
          <GeneralText>{this.steps[current].title}</GeneralText>
          <Steps current={current}>
            {this.steps.map((item, index) => (
              <Step key={index.toString()} small="small" />
            ))}
          </Steps>
          <div className="steps-content">{this.getStep(getFieldDecorator)}</div>
          <div className="steps-action">
            {' '}
            <ButtonWrapper>
              {current < this.steps.length - 1 && (
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{
                    background: '#ff9700',
                    fontWeight: 'bold',
                    border: 'none',
                  }}
                >
                  Next
                </Button>
              )}
              {current === this.steps.length - 1 && (
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{
                    background: '#ff9700',
                    fontWeight: 'bold',
                    border: 'none',
                  }}
                >
                  Done
                </Button>
              )}
              {current > 0 && (
                <Button
                  className="preButton"
                  style={{ marginLeft: 8, border: '1px solid #ff9700' }}
                  onClick={() => this.prev()}
                >
                  Previous
                </Button>
              )}
            </ButtonWrapper>
          </div>
        </Form>
      </Card>
    );
  }
}
export default Form.create()(Wizard);

标签: javascriptreactjsmeteorecmascript-6

解决方案


推荐阅读