Question

我在异步API调用方面遇到问题。当我执行API调用时（类似于redux的真实示例-https://github.com/reduxjs/redux/blob/master/examples/real-world/src/middleware/api.js）：

const actionWith = data => {
  const finalAction = Object.assign({}, action, data)
  delete finalAction[CALL_API]
  return finalAction
}

const [requestType, successType, failureType] = types
next(actionWith({
  type: requestType
}))

return API.post(apiName, path, myInit).then(
  response => next(actionWith({
    response,
    type: successType
  })), error => next(actionWith({
    type: failureType,
    error: error.message || 'Something bad happened in API call'
  }))
)

j我的页面被完全重新加载，这导致跨域问题，这使我的API调用失败。如果我分别执行API调用，则一切正常。虽然结合异步redux状态处理，我遇到了问题。我的动作如下：

export const UPDATE_DEVICE_REQUEST = 'UPDATE_DEVICE_REQUEST'
export const UPDATE_DEVICE_SUCCESS = 'UPDATE_DEVICE_SUCCESS'
export const UPDATE_DEVICE_FAILURE = 'UPDATE_DEVICE_FAILURE'

const updateDevice = (id, updatedConfiguration) => ({
  [CALL_API]: {
    types: [UPDATE_DEVICE_REQUEST, UPDATE_DEVICE_SUCCESS, UPDATE_DEVICE_FAILURE],
    apiName: 'PlayerAPI',
    path: '/device/1',
    method: 'post',
    myInit: {
      headers: {},
      body: {},
      response: true
    }
  }
})

在我的化简器中，我已经尝试过使用状态进行多种操作，但从未真正得到可行的解决方案：

case UPDATE_DEVICE_REQUEST:
  return Object.assign({}, state, {
    loading: true
  })
case UPDATE_DEVICE_FAILURE:
  return Object.assign({}, state, {
    loading: false
  })
case UPDATE_DEVICE_SUCCESS:
  return Object.assign({}, state, {
    loading: false
  })

您知道我的问题可能是什么吗？在日志中，我看不到任何迹象表明他为什么要进行完整的页面重新加载。谢谢

Answer 1

所以现在我找到了确切的问题和解决方案。似乎每次单击表单中的按钮时，我的表单都会触发页面的重新加载。

我在按钮所调用的函数中删除了...或使用过的event.preventDefault（）（还比较了https://github.com/react-bootstrap/react-bootstrap/issues/1510）。

由于这种奇怪的重载机制，我的API调用从未进行过。

API调用期间Redux更改状态更改时的URL

1 个答案: