javascript - PUT 请求成功，但 React、Redux 应用程序崩溃

Question

我有一个 React、Redux 应用程序，它应该作为 CRUD 应用程序工作。 CRUD 应用程序的一部分是更新内容的能力，这是我目前遇到的麻烦。 PUT 请求有效(可以在 Robomongo 中看到更改)，但我的应用程序随后崩溃，问题出在我的 reducer 上； Unhandled Rejection (TypeError): Cannot read property 'item' of undefined(是的，item 不是最好的命名方式，抱歉)。

我想向您介绍 PUT 请求的过程，毕竟 code > text。

我将从创建操作的地方开始，因为我想你可以看出我有一个表单作为我的合法起点。

所以，这是我的操作(抱歉代码墙)

Action :

import axios from 'axios'
import settings from '../../../../settings'
import { merge } from 'lodash'

axios.defaults.baseURL = settings.hostname

export function updateSettings(id, updatedValues, controller, door) {
  const custom_name = updatedValues.custom_name
  const location = updatedValues.location
  const open_duration = updatedValues.open_duration
  return (dispatch, getState) => {
    const state = getState()
    const door = state.fetchDoors.doors.find(val => val._id === id.itemId)
    const controller = state.fetchDoors.controllers.find(
      controller => controller._id === door.controller
    )
    console.log('door', door) // Returns updated object
    console.log('controller', controller) // Returns updated object

    const doorPayload = {
      ...door,
      custom_name,
      location
    }

    const controllerPayload = {
      ...controller,
      open_duration
    }

    axios
      .put(`${settings.hostname}/locks/${id.itemId}`, doorPayload)
      .then(res => {
        dispatch({ type: 'DOOR_UPDATING' })
        dispatch({
          type: 'DOOR_UPDATED_SUCCESS',
          doorPayload
        })
      })

    axios
      .put(
        `${settings.hostname}/controllers/${door.controller}`,
        controllerPayload
      )
      .then(res => {
        dispatch({ type: 'CONTROLLER_UPDATING' })
        dispatch({
          type: 'CONTROLLER_UPDATING_SUCCESS',
          controllerPayload
        })
      })
      .catch(err => console.log(err))
  }
}

这是我的 reducer

reducer :

const initialState = {
  isLoading: false
}

export const settings = (state = initialState, action) => {
  switch (action.type) {
    case 'DOOR_UPDATING':
      return { ...state, isLoading: true }

    case 'DOOR_UPDATED_SUCCESS':
      return { ...state, item: action.payload.item, isLoading: false } // Here's where the error occurs

    case 'CONTROLLER_UPDATING':
      return { ...state, isLoading: true }

    case 'CONTROLLER_UPDATING_SUCCESS':
      return { ...state, item: action.payload.item, isLoading: false }
    default:
      return state
  }
}

所以错误发生在我的 reducer 内部(我添加了注释)，我真的不明白为什么，现在 PUT 请求更改了我数据库中的数据。我认为我缺少一些愚蠢的东西，但我无法修复它。非常感谢所有帮助，如果需要更多代码/信息，请告诉我。

感谢阅读。

编辑:

这是我的 door 对象的样子:

Answer 1

在您的 reducer 中，您期望 action 具有以下形状:
{type: 'something', payload: 'something else'}
但是，当您发送操作时，您没有 payload 的属性。
这是您要发送的内容:

{
  ...door, // this will spread all properties of door (which doesn't have a property with the name payload)
  custom_name,
  location
}

然后您尝试访问 action.payload.item 因此出现错误:

Cannot read property 'item' of undefined

payload 从未在您的action 中定义(顺便说一下，item 也没有)。