Обнаружена ошибка при выполнении поста в моем приложении Reaction-Redux

Question

Последние два дня я изо всех сил пытался реализовать почтовый запрос в моем приложении реагировать на редукцию.Я не могу понять, если это какая-то проблема с моим синтаксисом или 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
        })
      );
  };

В моих инструментах для создания избыточности я получаю ложный ответ.В моей консоли я вижу POST 400 Bad Request.

Примечание: я делаю пост-запрос на свой локальный URL-адрес и проверил ответ также на почтальоне, он отлично работает.

Ниже приведен скриншот окна инструментов редукса и ответа почтальона.Спасибо.

ответ почтальона

redux dev tools

Answer 1

если ваш тип контента - form-data, вы должны передать значение 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, вы должны изменить тип содержимого на application / json

Answer 2

Для выполнения вызовов API в приложении реагировать на избыточность вам нужно использовать sagas, https://redux -saga.js.org / docs / вводная / BeginnerTutorial.html , вам нужен обычный потокотправить действие, которое вызывает сагу, а затем сага получает ответ, а затем сага может отправить еще одно действие, чтобы сохранить его в магазине.