我有一个问题，当我提交我的表单时，我的对象是空的，我在redux开发工具中也确认了这一点。当我提交表单时，DOM上应该出现一张卡片，上面有我在表单中输入的信息，或者按照反应方式，上面有传递给该组件的props的信息。嗯，当我提交的信息是空的，我的redux开发工具显示，对象是空的提交。
这是我的POST动作
export const postRecipes = (recipe) => {
const BASE_URL = `http://localhost:3001`
const RECIPES_URL =`${BASE_URL}/recipes`
const config = {
method: "POST",
body:JSON.stringify(recipe),
headers: {
"Accept": "application/json",
"Content-type": "application/json"
}
}
return (dispatch) => {
fetch(RECIPES_URL,config)
.then(response =>{ response.json()})
.then(recipe => { dispatch({ type: 'ADD_RECIPE', payload: recipe })
})
.catch((error) => console.log.error(error))
};
}
编辑:为我检索保存到数据库的食谱添加GET操作
export const getRecipes = () => {
const BASE_URL = `http://localhost:3001`
const RECIPES_URL =`${BASE_URL}/recipes`
return (dispatch) => {
dispatch({ type: 'START_FETCHING_RECIPES_REQUEST' });
fetch(RECIPES_URL)
.then(response =>{ return response.json()})
.then(recipes => { dispatch({ type: 'GET_RECIPES', recipes })});
};
}
这是我的减速机动作类型添加对象(希望我的措辞正确)
case 'START_ADDING_RECIPE':
return{
...state,
loading:true
}
case 'ADD_RECIPE':
const recipe = {
name: action.name,
ingredients: action.ingredients,
chef_name: action.chef_name,
origin: action.origin,
instructions: action.instructions,
category_id: action.category_id
}
编辑:添加reducers请求查看我的食谱的当前状态
case 'START_FETCHING_RECIPES_REQUEST':
return {
...state,
recipes: [...state.recipes],
loading: true
}
case 'GET_RECIPES':
return {
...state, recipes: action.recipes,
loading: false
}
编辑:mapDispatchToProps和mapDispatchToState函数
const mapStateToProps = state =>{
return{
recipes: state.recipes,
loading: state.loading
}
}
const mapDispatchToProps = dispatch =>{
return{
postRecipes: recipe => dispatch(postRecipes(recipe)),
getRecipes: () => dispatch(getRecipes()),
deleteRecipe: recipeId => dispatch(deleteRecipe(recipeId))
}
}
编辑:包括我创建的商店
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import manageRecipes from './reducers/manageRecipes';
import 'bootstrap/dist/css/bootstrap.min.css';
import { composeWithDevTools } from 'redux-devtools-extension'
const composeEnhancer = composeWithDevTools(applyMiddleware(thunk))
const store = createStore(manageRecipes,composeEnhancer)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
编辑:我相信我在这段代码中添加了一些东西下面是当用户与提交按钮
交互时触发的事件处理程序import React, { Component } from 'react'
import Select from 'react-select'
import axios from 'axios'
import '../index.css'
class RecipeInput extends Component{
constructor(props){
super(props)
this.state = {
category_id: [],
name:'',
ingredients: '',
chef_name: '',
origin: '',
instructions:''
}
}
async getOptions(){
const BASE_URL = `http://localhost:3001`
const CATEGORIES_URL =`${BASE_URL}/categories`
const res = await axios.get(CATEGORIES_URL)
const data = res.data
const options = data.map(d => ({
'label' : d.category,
'id' : d.id
}))
this.setState({category_id: options})
}
handleNameChange = (event) =>{
this.setState({name:event.target.value})
}
handleInsChange = (event) =>{
this.setState({instructions:event.target.value})
}
handleIngChange = (event) =>{
this.setState({ingredients:event.target.value})
}
handleChefChange = (event) =>{
this.setState({chef_name:event.target.value})
}
handleOriginChange = (event) =>{
this.setState({origin:event.target.value})
}
handleChange = (event) =>{
this.setState({category_id:event.id})
}
componentDidMount(){
this.getOptions()
}
handleSubmit = (event) =>{
alert(this.state.name + 'was set!')
event.preventDefault();
this.props.postRecipes(this.state)
this.setState({
name:'',
ingredients: '',
chef_name: '',
origin: '',
instructions: ''
})
}
render(){
let dropdown = 'form-select form-select-sm'
return(
<div>
<form onSubmit={this.handleSubmit}>
<Select options={this.state.category_id} onChange={this.handleChange} className={dropdown}/>
<div>
<label for='name'>Recipe Name:</label>
<input className ="form-control" type='text' value={this.state.name} onChange={this.handleNameChange} />
</div>
<div>
<label for='name'>Country Origin:</label>
<input className ="form-control" type='text' value={this.state.origin} onChange={this.handleOriginChange} />
</div>
<div>
<label for='name'>Chef Name:</label>
<input className ="form-control" type='text' value={this.state.chef_name} onChange={this.handleChefChange} />
</div>
<div>
<label for='name'>Ingredients:</label>
<textarea className ="form-control" cols="30" rows="5" type='text' value={this.state.ingredients} onChange={this.handleIngChange} />
<label for='name'>Instructions:</label>
<textarea className ="form-control" cols="30" rows="5" type='text' value={this.state.instructions} onChange={this.handleInsChange} />
</div>
<input value='submit' type='submit'/>
</form>
</div>
)
}
}
export default RecipeInput
我觉得这是在我的帖子行动的某个地方，但不确定在哪里，我怎么能纠正这个?
我的理解方式，我可能是错的，但这是我的理解，
在你的RecipeInput类中，你调用handlessubmit()。在该函数中，您使用this.state.
调用postRecipes()。你在哪里设置这个。初始化后的状态变量?
this.state = {
category_id: [],
name:'',
ingredients: '',
chef_name: '',
origin: '',
instructions:''
}
所以在fetch(RECIPES_URL,config)中的post请求将发送一个空对象。要改变这个，你需要设置这个。
在调用postRecipes()函数之前的状态。