Question

在注册用户并将信息发送到数据库时，我收到了错误的请求 IAM使用axios.post（apiurl。{username：user.username，password：user.password，email：user.email} 并将此代码存储在registeruser函数中

，然后在用户提交表单时调用它

以下用于注册用户的代码

TextView("Foo")
.sheet(isPresented: $showA) { Text("A") }
.sheet(isPresented: $showB) { Text("B") } // Does not work, only one sheet is allowed

Answer 1

您在调用注册用户功能时出错。您的数据对象构建不正确。我在这里提供了骨骼。看看是否有帮助

import React, { Component } from "react";
import Form from "./form";
import joi from "joi-browser";
import {registeruser} from "../http/registeruser";

class Register extends Form {


  state = { 

    data:{
      name:"", password:"", email:""},errors:{}
   }

   schema={
     name: joi.string().required().label("name"),
     password: joi.string().required().min(5).label("Password"),
     email: joi.string().required().label("Email"),
   }

 }

  const handleSubmit = () => {
      

      //validate properly here

      schema={
         name: joi.string().required().label("name"),
         password: joi.string().required().min(5).label("Password"),
         email: joi.string().required().label("Email"),
      }

      // build your data object properly here
      
      await registeruser(this.state.data);
    
  }


  render() { 
    return ( <div>
      <h1>Register</h1>

      <form onSubmit={ () => this.handleSubmit() }>.  // change this function so that you dont need to bind
 
      {this.renderInput("name","name","string")}
      {this.renderInput("password","Password","password")}
      {this.renderInput("email","Email","string")}

      {this.renderButton("Register")}


      </form>
      
      </div>


     );
  }
}
 
export default Register;

Answer 2

表单组件是处理变更和验证数据的组件我要把它包括在内


import React, { Component } from "react";
import joi from "joi-browser";
import Input from "./input";
import Select from"../select";


class Form extends Component {
  state = { 
 data: {},
errors:{}
  };
  
  validate = ()=>{
    const options = { abortEarly : false };
  const results = joi.validate(this.state.data,this.schema, options )
  
   if (!results.error) return null;
  
   console.log(results)
  
   const errors = {};
   for (let item of results.error.details) errors[item.path[0]] = item.message;
   return errors;
   
  }

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

    const errors = this.validate();
    this.setState({ errors: errors || {} });
    if (errors) return;

    this.doSubmit();
  };

  validateProperty = ({name, value}) => {
    const obj ={[name] : value};
    const schema = {[name] : this.schema[name]}
   const {error}= joi.validate(obj,schema);
   return error ? error.details[0].message : null ;

  }

  handleChange = ({ currentTarget: input }) => {
    const errors = { ...this.state.errors };
    const errorMessage = this.validateProperty(input);
    if (errorMessage) errors[input.name] = errorMessage;
    else delete errors[input.name];

    const data = { ...this.state.data };
    data[input.name] = input.value;

    this.setState({ data, errors });
  };


   
  
    renderButton(label) {
      return <button 
      disabled={this.validate()}
    className="btn-primary btn">{label}</button>
    }

    renderInput(name, label, type = "text") {
      const { data, errors } = this.state;
  
      return (
        <Input
          type={type}
          name={name}
          value={data[name]}
          label={label}
          onChange={this.handleChange}
          error={errors[name]}
        />
      );
    }


    renderSelect(name, label, options) {
      const { data, errors } = this.state;
  
      return (
        <Select
          name={name}
          value={data[name]}
          label={label}
          options={options}
          onChange={this.handleChange}
          error={errors[name]}
        />
      );
    }
}
 
export default Form;

createError.js：16未捕获（承诺）错误：响应失败，请求状态码为400

2 个答案: