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

Question

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

但是，由于它是一个 onClick 事件，deleteQuestion thunk 函数不像从 ComponentWillMount 发出的传统调度请求那样工作，而是 returns 一个带有从不调用的调度参数的匿名函数。因此，我需要在 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 请求中包含第二个调度调用。虽然可以在获取、post 和补丁请求中执行此操作，但我不明白为什么它在删除请求中不起作用。

我打的 thunk 电话是：

 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，而不是让您的商店为您发送删除问题操作。您应该从已经映射到调度的道具中调用 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 不会在收到响应后发送第二个调度请求

React onClick delete dispatch won't send second dispatch request after response received

fetch

dispatch

reactjs

redux

redux-thunk