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

Question

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

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

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

所以，这是我的操作（对不起代码墙）

操作：

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))
  }
}

这是我的减速器

减速器：

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 也没有）。

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

Successful PUT request, but React, Redux app crashes

javascript

put

reactjs

redux

操作：

减速器：

编辑：