Блог

Главная - Вопросы по программированию - Продолжайте получать 400 (неверный запрос) при запросе POST

Продолжайте получать 400 (неверный запрос) при запросе POST

#reactjs #post #fetch

#reactjs #Публикация #выборка

Вопрос:

Итак, я пытаюсь сделать запрос к базе данных, которую я настроил. Смысл в том, чтобы отправить сообщение для добавления в таблицу и чтобы оно вернуло мне полный список.

Я продолжаю получать «POST http://localhost:8000/api/folders 400 (неверный запрос)» в консоли. Я знаю, что это POST, поскольку, когда я проверяю базу данных как на DBeaver, так и на POSTman, база данных остается неизменной.

Я попытался написать «name» как «name», и это ничего не изменило.

 const postfolder = {
    method: 'POST',
    body: JSON.stringify({ "name" : f })
};

const getFolder = {
    method: 'GET'
};

    fetch(`${config.API_ENDPOINT}/folders`, postfolder)
    .then(
        fetch(`${config.API_ENDPOINT}/folders`, getFolder)
            )
        .then(res => {
            if (!res.ok)
            return res.json().then(e => Promise.reject(e))
        })
        .then(folders => {
            this.setState({folders : folders});
        })
        .catch( error =>{
            console.error({ error });   
            console.log("I fucked up the coding: 001");
        });

Редактировать:
Для ясности вот компонент, который определяет f . Хотя у меня был console.log (не показан выше), который проверяет значение и выдает мне правильное.

 import React, {Component} from 'react';
//import { NavLink, Link } from 'react-router-dom'

import './AddFolder.css';

export default class AddFolder extends Component{
  
  handleSubmit = (e) => {
    e.preventDefault();
    console.log("handleSubmit ran");

    var nameError = document.getElementById("folderNameError");

    if (!e.target.name.value){
      nameError.classList.remove("hidden");
      return console.log("no name");
  }

  nameError.classList.add("hidden");

    return this.props.addNewFolder(e.target.name.value);
    // process form values here

  }

render(){
  return (
    <form className="folderForm" onSubmit={(e) => this.handleSubmit(e)}>
        <h3>New Folder</h3>
        <label>Text </label>
        <input type="text" className="elementName" name="name" id="folderName"/>
      <div>
        <button type="submit" className="registration__button">
                       Save
                   </button>
      </div>
      <div>
        <button type="reset" className="registration__button">
                        Cancel
                    </button>
      </div>
      <div className="errorSpace">
            <p className="hidden" id="folderNameError">A name is required</p>
        </div>
    </form>
  )
}
}

Вот краткое изображение базы данных. Это просто имя и идентификатор.
введите описание изображения здесь

Я могу получить доступ к нему с помощью POSTMAN, поэтому я не верю, что это проблема.

Комментарии:

1. Я думаю, нам нужно что-то знать о том, что прослушивает запрос, прежде чем мы сможем помочь вам выяснить, почему это неверный запрос. Это БД с автоматическим API? (Какой из них? Можете ли вы поделиться схемой для folders ?) Что-то вроде Express.js конечная точка? (Можете ли вы поделиться кодом?) Мне также интересно, как f определяется

2. Я просто разместил картинку. Запросы get и post работают с POSTMAN.

Ответ №1:

Итак, я обнаружил, что проблема заключалась в том, что мне нужно было добавить к моему запросу на выборку.

У меня это было как:

 const postfolder = {
    method: 'POST',
    body: JSON.stringify({ "name" : f })
};

Это должно быть:

     const postfolder = {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
          },
        body: JSON.stringify(newFolder)
    };

Мне нужен был тип содержимого.