在React to Rails API中发送Fetch删除请求的问题

I'm able to send get and put methods fine, but am surprisingly not able to send a delete fetch request from my Redux action to my Rails backend. This is even more perplexing because in Postman I'm able to hit the Destroy route fine. I've searched all over for a fix, but haven't found anything that works. I have an onClick function that triggers the Redux action that sends this request:

我能够发送get和put方法，但令人惊讶的是我无法将Redux操作中的删除提取请求发送到我的Rails后端。这更加令人困惑，因为在Postman中我能够很好地击中Destroy路线。我已经搜遍了所有修复，但没有找到任何有用的东西。我有一个onClick函数触发发送此请求的Redux操作：

 export const deleteQuestion = (questionId, routerHistory) => {
   return dispatch => {
     return fetch(`${API_URL}/questions/${questionId}`, {
       method: 'DELETE',      
     }).then(response => {
         dispatch(removeQuestion(questionId));
         routerHistory.replace(`/`);
     })
     .catch(error => console.log(error));
   };
 };

I've checked numerous times to make sure the syntax and route is fine. questionId is also the correct question ID. However, no matter what I do, the Destroy method in the Questions controller won't recognize the request. I've checked the route in Rails and it exists. I don't get any errors, no request is ever sent to the server, and nothing is returned, not in terminal, the console, or anything.

我已经多次检查以确保语法和路线正常。 questionId也是正确的问题ID。但是，无论我做什么，Questions控制器中的Destroy方法都无法识别请求。我已经检查了Rails中的路由并且它存在。我没有收到任何错误，没有任何请求发送到服务器，也没有返回任何内容，而不是终端，控制台或任何东西。

This is the Github account: https://github.com/jwolfe890/react_project1

这是Github帐户：https：//github.com/jwolfe890/react_project1

I'd really appreciate any insight anyone has. Thank you!

我真的很感激任何人的见解。谢谢！

1 个解决方案

#1

Your deleteQuestion method returns an anonymous function with a dispatch parameter which never seems to be called (Calling code). Only deleteQuestion is called but not the function returned by it.

您的deleteQuestion方法返回一个带有dispatch参数的匿名函数，该参数似乎永远不会被调用（调用代码）。只调用deleteQuestion，但不调用它返回的函数。

Because it is called by a click handler I'd say you actually want something like this:

因为它是由一个点击处理程序调用我会说你真的想要这样的东西：

export const deleteQuestion = (questionId, routerHistory) => {   
  fetch(`${API_URL}/questions/${questionId}`, {
     method: 'DELETE',      
  }).then(response => {
     dispatch(removeQuestion(questionId));
     routerHistory.replace(`/`);
  })
  .catch(error => console.log(error));
};

Or if you want to return the promise, you could of course change it to:

或者，如果您想要返回承诺，您当然可以将其更改为：

export const deleteQuestion = (questionId, routerHistory) => {   
  return fetch(`${API_URL}/questions/${questionId}`, {
     method: 'DELETE',      
  }).then(response => {
     dispatch(removeQuestion(questionId));
     routerHistory.replace(`/`);
  })
  .catch(error => console.log(error));
};

If you want to dynamically inject the dispatch function, you could leave your original code, but would have to call the method like this:

如果要动态注入调度函数，可以保留原始代码，但必须调用以下方法：

deleteQuestion(this.state.question.id, history)(myDispatchMethod);

#1