エムレ・セルト:
こんにちは私はReactJSの学生の開発者です。私はReactjsコンテキストAPIを使用してコードに方法を学習しようとしています。私はカテゴリのための私のフォームからデータを送信すると、私はこのようなエラーが直面しています
未処理の拒絶(TypeError例外):GET / HEADメソッドを持つ要求は、ボディを持つことができません。「ウィンドウ」on「にフェッチ」を実行できませんでした。
これの意味は何ですか?私はこのプロセスを実行するとき、私は何をmisingのですか?コードを休閑することは、私の方法を含みます。
私のコンテキストの一部:
import React, { Component } from 'react';
const CapsuleContext = React.createContext();
const reducer = (state,action)=>{
switch (action.type) {
case "SAVE_CATEGORY_TO_API":
fetch("http://localhost:3000/categories/", {
headers: { "content-type": "application/json",
"Accept":"application/json" },
body: JSON.stringify(action.payload)
})
break;
default:
return state
}
}
export class CapsuleProvider extends Component {
state = {
categories: [],
apiUrl: "http://localhost:3000/",
dispatch : action => {
this.setState(state => reducer(state,action))
}
}
getCategories = () => {
fetch(this.state.apiUrl + "categories")
.then(res => res.json())
.then(data => this.setState({ categories: data }));
}
render() {
return (
<CapsuleContext.Provider value = {this.state}>
{this.props.children}
</CapsuleContext.Provider>
);
}
}
const CapsuleConsumer = CapsuleContext.Consumer;
export default CapsuleConsumer;
私categoryAddコンポーネント:
import React, { Component } from 'react';
import { Button, Form, FormGroup, Label, Input, ListGroup, ListGroupItem } from 'reactstrap';
import { Link } from "react-router-dom"
import CapsuleConsumer from '../../context/Context';
import CategoryList from './CategoryList';
class CategoryAdd extends Component {
handleChange = (event) => {
let value = event.target.value;
let name = event.target.name;
this.setState({ [name]: value })
}
handleSubmit = (event) => {
event.preventDefault();
}
saveCategory = (event, dispatch) => {
dispatch({ type: "SAVE_CATEGORY_TO_API", payload: {id : event.state.id , categoryName : event.state.categoryName , seoUrl:event.state.seoUrl}})
}
render() {
return (
<CapsuleConsumer>
{
value => {
const { categories, dispatch } = value;
return (
<div>
<div>
<Form className="mt-3 font-weight-bold" onSubmit={this.handleSubmit}>
<FormGroup className="text-left">
<Label for="id">Category Id</Label>
<Input type="text"
name="id"
onChange={this.handleChange}
placeholder={categories.length + 1}
/>
</FormGroup>
<FormGroup className="text-left">
<Label for="categoryName">Category Name</Label>
<Input type="text"
name="categoryName"
onChange={this.handleChange}
placeholder="enter a category name" />
</FormGroup>
<FormGroup className="text-left">
<Label for="seoUrl">Seo Url</Label>
<Input type="text"
name="seoUrl"
onChange={this.handleChange}
placeholder="enter a seo url" />
</FormGroup>
<Button color="success" onClick={() => this.saveCategory(this, dispatch)} type="submit">Submit</Button>
</Form>
</div>
</div>
)
}}
</CapsuleConsumer>
);
}
}
export default CategoryAdd;
処分:
フェッチが送信するので、あなたのエラーの理由は、GET
要求の一部としての体を許可しないデフォルトでは、要求を。あなたはフェッチ方法があることを指定する必要がありますPOST
:
fetch("http://localhost:3000/categories/", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept":"application/json"
},
body: JSON.stringify(action.payload)
})