Question

在一个组件中，我有一个按钮，onClick调度deleteQuestion动作，发送一个fetch后端删除请求，当收到响应时，应该调用另一个动作来更新Redux存储。

但是，由于它是一个onClick事件，因此deleteQuestion thunk函数不像ComponentWillMount发出的传统调度请求那样工作，而是返回一个匿名函数，该函数带有一个永远不会被调用的调度参数。因此，我需要在onClick方法中同时调用两次调度：

   handleDelete = () => {
    const { questionId } = this.props.match.params
    const { history } = this.props
    deleteQuestion(questionId, history)(deleteQuestion); //calling method twice
   }

虽然这种方法对于触发对Rails后端的删除请求是有效的，但是当我收到响应时，我嵌入在deleteQuestion操作中的第二个调度函数 - dispatch（removeQuestion（questionId）） - 将不会触发更新Redux商店。我已经尝试在商店中放置多个调试器并检查控制台和终端是否有错误，但没有任何反应。

我已经在线阅读了Redux文档和其他资源，并且从我能够找到的内容中他们都说可以在.then请求中包含第二个调度调用。虽然可以在get，post和patch请求中执行此操作，但我无法弄清楚它在删除请求中不起作用的原因。

我打的电话是：

 export function deleteQuestion(questionId, routerHistory) {
   return (dispatch) => {
     fetch(`${API_URL}/questions/${questionId}`, {
       method: 'DELETE',
     }).then(res => {
       dispatch(removeQuestion(questionId))
     })
   }
 }

github是： https://github.com/jwolfe890/react_project1/blob/master/stumped-app-client/src/actions/questions.js

我真的很感激任何见解，因为我一直试图通过这两天了！

Answer 1

您直接呼叫操作deleteQuestion，而不是让您的商店为您发送删除问题操作。您应该从已映射到dispatch的道具中调用deleteQuestion：

handleDelete = () => {
  const { questionId } = this.props.match.params
  const { history } = this.props
  this.props.deleteQuestion(questionId, history);
}

如果传入一个对象为mapDispatchToProps，则每个元素都是调度调用。换句话说，您的mapDispatchToProps相当于：

(dispatch) => ({ 
    deleteQuestion: (...params) => dispatch(deleteQuestion(...params)) 
})

React onClick delete dispatch在收到响应后不会发送第二个调度请求

1 个答案: