我已经使用postman测试了端点,并且可以成功访问所有产品,检索单个产品,添加新产品(但仅将标头设置为application / x-www-form-urlencoded),并删除产品.

我正在松散地遵循构建前端的教程,并做出反应并使用axios来发出http请求.我可以毫无问题地阅读,所以得到所有并通过ID得到一个正在工作.

但是,我已经用我的帖子请求打了一堵墙.如果我发送一个帖子请求,我会在api服务器控制台中收到此错误后端 –

Unhandled rejection SequelizeValidationError: notNull Violation: product

在发送请求大约几分钟后,在前端,我得到：

XHR Failed loading: POST "http://localhost:3000/api/products/new".
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:59
Promise resolved (async)
request @ Axios.js:51
Axios.(anonymous function) @ Axios.js:71
wrap @ bind.js:9
NewProduct._this.createHandler @ ProductNew.js:25
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:452
executedispatch @ react-dom.development.js:836
executedispatchesInorder @ react-dom.development.js:858
executedispatchesAndRelease @ react-dom.development.js:956
executedispatchesAndReleasetopLevel @ react-dom.development.js:967
forEachAccumulated @ react-dom.development.js:935
processEventQueue @ react-dom.development.js:1112
runEventQueueInBatch @ react-dom.development.js:3607
handletopLevel @ react-dom.development.js:3616
handletopLevelImpl @ react-dom.development.js:3347
batchedUpdates @ react-dom.development.js:11082
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
09:59:59.293 ProductNew.js:30 

Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:87)

如果我删除了验证,则会将新产品成功添加到数据库中,但所有值都为null.

这是我的ProductNew.js文件：

import React from ''react'';
import axios from''axios'';
import ButtonAdd from ''../components/Buttons/ButtonAdd'';

class NewProduct extends React.Component {
  state = {
    title: '''',description: '''',price: ''''
  }
  createHandler = () => {
    const data = {
      Title: this.state.title,Description: this.state.description,Price: this.state.price
    };
    console.log(''Raw data is: '' + Object.entries(data));
    // => Raw data is: Title,burger,Description,bun,Price,5

    const header = {
      ContentType: ''application/x-www-form-urlencoded'',Accept: ''application/json''
    };
    const querystring = require(''querystring'');
    console.log(querystring.stringify(data));
    // => Title=burger&Description=bun&Price=5

    console.log(''Data is:'' + JSON.stringify(data));
    // => Data is:{"Title":"burger","Description":"bun","Price":"5"}

    axios.post(''/api/products/new'',querystring.stringify(data),header)
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    });
  }

  render () {
    return (
      <div className=''NewPost''>
        <h1>Add a Product</h1>
        <label>Title</label>
        <textarea rows=''4'' value={this.state.title} onChange={(event) => this.setState({title: event.target.value})} />
        <label>Description</label>
        <textarea rows=''6'' value={this.state.description} onChange={(event) => this.setState({description: event.target.value})} />
        <label>Price</label>
        <input type=''number'' value={this.state.price} onChange={(event) => this.setState({price: event.target.value})} />
        // ButtonAdd.js onClick={props.create} added to <Button> tag
        <ButtonAdd create={this.createHandler}>Add New Product</ButtonAdd>
      </div>
    );
  }
}

export default NewProduct;

我在github上找到了这个issue,我希望能解决我的问题.我添加了各种console.log来跟踪状态数据通过脚本发生的事情,但我看不出为什么我的POST请求是空的.我很欣赏有关我做错的任何指示.

以下答案提供了各种内容类型传递的不同格式的示例,这些格式可能会导致您的问题：differences in application/json and application/x-www-form-urlencoded

>我正在做一个简单的Todo清单
>我有一个整个列表的组件：TodoList
>我想在列表中播放一些可以玩的项目
>我想我会发送一个简单的数组作为TodoList组件的道具,然后立即将其设置为状态所以我有一些工作可以解决

import * as React from "react";
import { TodoItem,ITodoItem } from "../TodoItem";

interface ITodoListProps {
    items: ITodoItem[];
}

interface ITodoListState {
    stateItems: ITodoItem[];
}

export class TodoList extends React.Component<ITodoListProps,Partial<ITodoListState>> {
    constructor(props: ITodoListProps) {
        super(props);

        // Trouble figuring this part out
        //  I''d like to set the state to the list from the 
        //  props,as a seed.
        this.setState({
            stateItems: this.state.stateItems
        });
    }

    public render() {
        return (
            <div>
                <ul>
                    // This should probably be displaying the items from the state,and not the props.
                    {this.props.items.map((todo,i) => {
                        return <TodoItem key={i} name={todo.name} />
                    })}
                </ul>
            </div>
        );
    }
}

constructor() {
  // ...
  this.state = { stateItems: ... /* initial value */ }
}

稍后在生命周期方法或事件侦听器中,您可以使用setState在构造函数中更改状态