Блог

У меня есть API rails, в который я пытаюсь отправить данные JSON с интерфейса react в этом формате:

 {
"user"  : {
             "email": "daves@email.com"
             "password": "dave123"
             "password_confirmation": "dave123"
             "subject": "david"
             "teacher": "student"
             "username": "mikey"
          }
 }
 

очевидно, что он вложен внутри «пользователя»,
но в настоящее время мой код просто отправляет его без участия пользователя, а API не нравится формат JSON

 Signup.js:18 POST http://localhost:3001/api/users net::ERR_ABORTED 422 (Unprocessable Entity)


}
email: "daves@email.com"
password: "dave123"
password_confirmation: "dave123"
subject: "david"
teacher: "student"
username: "mikey"
}
 

Как я могу отправить JSON в API в правильном формате? вот javascript для страницы отправки входа в систему

 import React from 'react'
import { useState } from 'react'
//  import axios from 'axios'

export default function Signup() {
  const [teacher, setUserType] = useState("student");
  const [subject, setSubject] = useState(" ");
  const [email, setEmail] = useState("email");
  const [password, setPassword] = useState("password");
  const [password_confirmation, setConfirmedPassword] = useState("confirm password");
  const username = "mikey"

  const handleSubmit = (e) => {
    e.preventDefault();
    const user = {teacher, subject, email, password, password_confirmation, username}
    console.log(user)

    fetch('http://localhost:3001/api/users', {
      mode: 'no-cors',
      method: 'POST', 
      headers: { "Content-Type": "application/json"},
      body: JSON.stringify(user)
    }).then(() => {
      console.log(user)
    })
  }
  
  return (
    <div className="signup-form">
      <form onSubmit={handleSubmit}>
        <label>
          <input 
            type="radio"
            value={teacher}
            onChange={(e) => setUserType(e.target.value)}
            />
            Student
        </label>
        
        <label>
          <input 
            type="radio"
            value={teacher}
            onChange={(e) => setUserType(e.target.value)}
            />
            Tutor
        </label>

        <label>Subject</label>
          <input 
            type="text"
            required
            placeholder=" "
            onChange={(e) => setSubject(e.target.value)}
          /><br/>
        <label>Email address</label>
        <input 
          type="text"
          required
          placeholder="email"
          onChange={(e) => setEmail(e.target.value)}
        /><br/>
        <label>New password</label>
        <input 
          type="text"
          required
          placeholder="choose password"
          onChange={(e) => setPassword(e.target.value)}
        /><br/>
        <label>Confirm password</label>
        <input 
          type="text"
          required
          placeholder="confirm password"
          onChange={(e) => setConfirmedPassword(e.target.value)}
        />
        <button>Submit</button>
      </form>
    </div>
  );
}
 

Спасибо

чтобы добавить, я смог отправить запрос на отправку в postman, который возвращает:

 {
  "user": {
    "id": 4,
    "email": "testesr@testing.com",
    "username": "fffmike",
    "subject": null,
    "teacher": null,
    "token": "eyJhbGciOiJIUzI1NiJ9.eyJpZCI6NCwiZXhwIjoxNjM0MDYxOTkwfQ.8qLlB5wwPGSCsxtkzjuEIxw8PFbLKoM_fo9UllNsonQ"
  }
}
 

но не через fetch

Попробуйте JSON.stringify({ user }) вместо JSON.stringify(user) того, чтобы создавать вложенное поле.

Прямо сейчас похоже, что пользователь неправильно отформатирован в вашей user переменной. Поскольку ваша user переменная передается непосредственно в качестве тела запроса на извлечение, вам нужно будет создать объект с нужным форматом перед запуском JSON.stringify .

 const handleSubmit = (e) => {
    e.preventDefault();
    const user = {user: {teacher, subject, email, password, password_confirmation, username}}
    console.log(user)

    fetch('http://localhost:3001/api/users', {
      mode: 'no-cors',
      method: 'POST', 
      headers: { "Content-Type": "application/json"},
      body: JSON.stringify(user)
    }).then(() => {
      console.log(user)
    })
  }