Question

过去两天我一直在努力在react-redux应用程序中实现post请求。我无法理解这是否是我的语法或API的问题。附上以下相关代码：

形式

<form onSubmit={this.onSubmit}>
            <div>
                <label>Title: </label>
                <br />
                <input
                type="text"
                name="title"
                onChange={this.onChange}
                value={this.state.title}
                />
            </div>
            <br />
            <div>
                <label>Body: </label>
                <br />
                <textarea
                name="body"
                onChange={this.onChange}
                value={this.state.body}
                />
            </div>
            <br />
            <button type="submit">Submit</button>
        </form>

user.js（onchange和onsubmit事件）

onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

onSubmit(e) {
        e.preventDefault();

       const post = {
           title: this.state.title,
           body: this.state.body
        };

    this.props.createPost(post);
  }

store.js

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'

const initialState = {};

const middleware = [thunk];

const store = createStore(  postReducer, 
                            initialState, 
                            compose(
                            applyMiddleware(...middleware),
                            window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
                         ));

export default store;

postReducer.js

const initialState = {
  item: {}
};

export default function(state = initialState, action) {
    switch (action.type) {
      case 'CREATE_POST':
        return {
          ...state,
          item: action.payload
        };
      default:
        return state;
    }
  }

postAction.js

export const createPost = postData => dispatch => {
    console.log(JSON.stringify(postData));
    fetch(URL, {
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data',
        'x-access-token': '*********'
      },
      body: JSON.stringify(postData)
    })
      .then(res => res.json())
      .then(post =>
        dispatch({
          type: 'CREATE_POST',
          payload: post
        })
      );
  };

在我的redux dev工具中，我收到了错误的回复。在我的控制台中，我看到POST 400 Bad Request。

注意：我正在我的localhost网址上发帖子请求并检查邮递员的回复，它运作正常。

以下是redux dev工具窗口和邮递员响应的屏幕截图。感谢。

postman response

redux dev tools

Answer 1

如果您的内容类型是表单数据，则必须传递formData值而不是JSON字符串。因此，此行代码JSON.stringify(postData)导致了400问题。

您可以尝试这样

export const createPost = postData => dispatch => {


var form_data = new FormData();

for ( var key in postData ) {
    form_data.append(key, postData [key]);
}

fetch(URL, {
  method: 'post',
  headers: {
    'Content-Type': 'multipart/form-data',
    'x-access-token': '*********'
  },
  body: form_data
})
  .then(res => res.json())
  .then(post =>
    dispatch({
      type: 'CREATE_POST',
      payload: post
    })
  );

};

我没有测试上面的代码，但我认为它会起作用。如果您仍想发送JSON字符串数据，则必须将content-type更改为application / json

Answer 2

要在react-redux应用程序中进行API调用，您需要使用sagas，https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html，通常的流程是你需要调度触发saga的动作然后saga得到响应然后saga可以再派一个动作将其保存到商店。

在react-redux应用程序中执行post时遇到错误

2 个答案: