Question

所以我正在尝试向我设置的数据库发出请求。关键是发送一个 POST 以添加到表格中，并让它将完整列表反馈给我。

我一直在控制台中收到“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>
  )
}
}

这是数据库的快速图片。它只是一个名称和一个 ID。

我可以使用 POSTMAN 获取它，所以我认为这不是问题所在。

Answer 1

所以我发现问题是我需要添加到我的提取请求中。

我认为：

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

应该是：

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

我需要内容类型。

继续在 POST 请求中获得 400（错误请求）

1 个答案: