Question

我正在研究一个使用react-redux进行前端的项目。我已经解决了一个问题，但我不知道为什么。有人可以给我这个主意吗？

问题是，我在下面初始化我的“ guidelineManagement”状态（位于guidelineManagement.js中）：

    const init = {
      page: 'GuidelineTableComponent',
      status: null,
      msg: [],
      error: null,
      guidelineData: [],
      data: []
    }

我还有另一个reducer处理登录状态，它在“ login.js”中。我使用combineReducers来组合两个减速器。

现在，在每次加载页面时，我都会执行“ fetchLoginStatus”操作，它从服务器加载登录状态，并在login.js中装入reducer句柄，

因此，在guidelineManagement减速器中，它将执行默认情况。

我的表演看起来像这样

default:
  console.log({...state})
  return {...state}

但是当我在“ fetchLoginStatus”完成后检查记录器时，状态变为以下状态：

在fetchLoginStatus之前：

guidelineManagement:
    data: Array []
    error: null
    guidelineData: Array []
    msg: Array []
    page: "GuidelineTableComponent"
    status: null
    <prototype>: Object { … }

但在fetchLoginStatus完成之后：

guidelineManagement: 
    data: Array []
    error: null
    guidelineData: Array(3) [ {…}, {…}, {…} ]
    msg: undefined
    page: "GuidelineTableComponent"
    status: "success"
    <prototype>: Object { … }

guidelineManagement.msg变得未定义。

如果我将默认大小写更改为以下内容，它将正常工作

default:
  console.log({...state})
  return state

fetchLoginStatus操作之后的结果变为：

guidelineManagement: 
    data: Array []
    error: null
    guidelineData: Array(3) [ {…}, {…}, {…} ]
    msg: Array []
    page: "GuidelineInsertComponent" 
    status: "success"
    <prototype>: Object { … }

结果正确，味精保留为空数组。

btw，console.log在默认情况下表示在用例块中， msg是空数组，表示在返回之前，味精是正确的。

顺便说一句，在登录状态下，也有一个味精数组，在我的设计中，state.msg用于接收服务器响应。

，我注意到只有味精会导致此问题。 state.guidelineManagement.data和state.guidelineManagement.guidelineData 两者都是数组，在动作完成前它们保持相同的状态。

知道导致此问题的原因是什么

Answer 1

好，经过数小时的搜索和调试，我知道了，

与return {...state}，return state无关在不同的reducer（login和guidelineManagement）中也没有很多味精

当我创建一个用于处理ajax数据的动作并通知react以重新呈现页面时，这只是一个小错误：

export const refreshGuideline = (status, data, msg) => ({
  type:types.GUIDELINE_REFRESH_GUIDELINE_DATA,
  status,
  data
})

以及在reducer中：

    case types.GUIDELINE_REFRESH_GUIDELINE_DATA:
      state.guidelineData = action.data
      state.status = action.status
      state.msg = action.msg
      return {...state}

action.msg是未定义的，因此state.guidelineManagement.msg变为未定义...

在执行以下更改操作后，一切正常。

export const refreshGuideline = (status, data, msg) => ({
  type:types.GUIDELINE_REFRESH_GUIDELINE_DATA,
  status,
  data,
  msg
})

哦，即使fetchLoginStatus没有更改fetchLoginStatus，msg操作前后记录器logguidelineManagement.msg也不同的原因仅仅是因为调用了refreshGuideline一个ajax调用之后，它是异步的.....

我整天都在搜索中，体验了对象分配和数组分配的工作原理...

还原器完成后，状态为redux的数组未定义

1 个答案: