Question

我正在尝试将表单数据发送到服务器，但是当我单击“下一步”按钮（向导表单）时，它给我错误。我使用了向导表单，并在步骤1中，当用户单击“下一步”按钮时，表单数据应发送到服务器，但与此同时它给我错误，并在控制台中警告我（未定义用户）：

” {错误：400，原因：“匹配失败”，消息：“匹配失败[400]”， errorType：“ Meteor.Error”}

代码

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({
            userOject,
          }),
        })
          .then(response => response.json())
          .then(user => {
            if (user.error) {
              console.warn(user);
            } else if (user && user.user) {
              console.warn(user);
            }
          });
      }
    });
  };

  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);

”

Answer 1

这是服务器错误，表示您的参数与check函数不匹配。

ReactJS错误; {错误：400，原因：“匹配失败”，消息：“匹配失败[400]”，错误类型：“ Meteor.Error”}

1 个答案: