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

在您的减速机中，您期望并且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，因此您收到错误：

无法阅读属性＆＃39; item＆＃39;未定义的

payload永远不会在action中定义（顺便说一下，item也是如此）。

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

动作：

减速机：

编辑：

1 个答案: