Как обновить запись в базе данных с помощью React и Redux? - PullRequest
Новая
       53

Как обновить запись в базе данных с помощью React и Redux?

0 голосов
/ 02 мая 2020

В настоящее время я работаю через React и хотел бы реализовать CRUD API. За исключением функции обновления все работает пока. Когда я запускаю функцию обновления, я получаю следующую ошибку:

Uncaught (в обещании) Не удалось установить sh соединение. Получающий конец не существует.

Я работаю с Redux. и Ax ios.

Edit_Story Component Обновлено : 

import {editStory } from "../../actions/story";

export class EditStory extends Component {

  constructor(props) {
    super(props);
    this.getStory = this.getStory.bind(this);
    this.updateStory = this.updateStory.bind(this);
    this.onChangeTitle = this.onChangeTitle.bind(this);
    this.onChangeContent=this.onChangeContent.bind(this);
    this.onChangeAudio=this.onChangeAudio.bind(this);


this.state = {
    story: {
        id: null,
        title: "",
        content: "",
        audio: ""
      }

    };
}


    componentDidMount() {
    this.getStory(this.props.match.params.id);
  }



  onChangeTitle(e) {
    const title = e.target.value;

    this.setState(function(prevState) {
      return {
        story: {
          ...prevState.story,
          title: title
        }
      };
    });
  }


  onChangeContent(e) {
    const content = e.target.value;

    this.setState(prevState => ({
     story: {
        ...prevState.story,
        content: content
      }
    })); 

  }

  onChangeAudio(e) {
    const audio = e.target.name;

    this.setState(prevState => ({
     story: {
        ...prevState.story,
        [e.target.name]: e.target.files[0]
      }
    }));
  }


  getStory(id) {
    this.props.getSingleStory(id)
      .then(response => {
        this.setState({
          story: response.data
        });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }  


    updateStory() {
    let story = this.state;
    let formData= new FormData ();
    formData.append('id',story.id);
    formData.append('title',story.title);
    formData.append('content',story.content);
    formData.append('audio',story.audio);
    this.props.editStory(
      formData.id,
      formData
    )
      .then(response => {
        console.log(response.data);
        //this.props.history.push('/story_listview')

      })
      .catch(e => {
        console.log(e);
      });
  }


  static propTypes = {
      getSingleStory: PropTypes.func.isRequired,
      editStory: PropTypes.func.isRequired
  };

Действие Edit Story выглядит следующим образом: 

// EDIT STORY
export const editStory = (id, data) => (dispatch, getState)=> 
 new Promise ((resolve, reject) => {
  axios
    .put(apiBase +`/story/${id}/`,data, tokenConfig (getState))
    .then(res => {
      dispatch(createMessage({ editStory: "Story Updated" }));
      dispatch({
        type: EDIT_STORY,
        payload: res.data
      });
      resolve (res);
    })
    .catch(err => {
      reject(err);
       dispatch(returnErrors(err.response.data, err.response.status))
     }
     )
});

И Редуктор выглядит так: 

case EDIT_STORY:
      return {
        ...state,
        story: state.story.filter(story => story.id  !== action.payload)
      };

Я еще не знаком с редуксом и не нахожу ошибки.

Спасибо за каждый намек.

РЕДАКТИРОВАТЬ

Похоже, что каким-то образом данные, переданные в действие .put(apiBase +/story/${id}/,data, tokenConfig (getState)), добавляются в apiBase + и попадают в путь. Так что путь к истории наконец-то выглядит как http://localhost:3000/?title=dfdf_BLABA&content=dfdf#/story/9. Я полагаю, что это может быть причиной невозможности подключения.

Почему функция обновления записывает данные в путь и как это исправить?

...