javascript - 如何使用 React 和 Redux 更新数据库条目？

Question

我目前正在使用 React 并希望实现一个 CRUD API。除了更新功能，到目前为止一切正常。当我运行更新功能时，出现以下错误：

Uncaught (in promise) 无法建立连接。接收端不存在。

我与 Redux 一起工作。和 Axios。

Edit_Story 组件更新：

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
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)
      };

我对 redux 还不是很熟悉，也没有发现错误。

感谢您的每一个提示。

编辑

似乎以某种方式传递给动作的数据.put(apiBase +/story/${id}/,data, tokenConfig (getState))被添加到路径中apiBase +并最终出现在路径中。所以故事的路径最终看起来像http://localhost:3000/?title=dfdf_BLABA&content=dfdf#/story/9。我想这可能是无法连接的原因。

为什么更新函数将数据写入路径以及如何解决？

标签： javascriptreactjsreduxaxios