时间戳

首页 > 解决方案 > 在 Reducer 中未定义数组数据的初始状态

reactjs - 在 Reducer 中未定义数组数据的初始状态

问题描述

我想将对象数据保存在我的数组状态中。但是当我尝试在 reducer 中调用一个动作时，当我尝试 console.log() 时，INITIAL_STATE.highlightedVerse 总是导致未定义。它应该是一个空数组，而不是未定义的。

这些是我在 package.json Expo v32.0.0、React v16.5.0、Redux v4.0.1、React Redux v5.1.1、Redux Persist v.5.10.0 中使用的依赖项

这些是我写的代码：

import {
  ADD_BIBLE_VERSE_HIGHLIGHT,
  REMOVE_BIBLE_VERSE_HIGHLIGHT,
} from 'ndc-ministry/redux/actions/types'

const INITIAL_STATE = {
  highlightedVerse: [],
}

const reducer = (state = INITIAL_STATE, action) => {

  switch (action.type) {
    case ADD_BIBLE_VERSE_HIGHLIGHT:
      const currentHighlightedVerse = state.highlightedVerse
      if(currentHighlightedVerse.length > 0){
        currentHighlightedVerse.forEach(obj => {
          if(action.payload.bookIndex == obj.bookIndex 
            && action.payload.chapterIndex == obj.chapterIndex 
            && action.payload.verseIndex == obj.verseIndex
          ) {
            return {...state}
          }
        })
      }

      return {
        ...state,
        highlightedVerse: [...state.highlightedVerse, action.payload]
      }


    case REMOVE_BIBLE_VERSE_HIGHLIGHT:
      const deletedHighlightVerse = state.highlightedVerse.filter(obj => JSON.stringify(action.payload) != JSON.stringify(obj))
      return {
        ...state,
        highlightedVerse: deletedHighlightVerse
      }

    default:
      return state

  }
}

export default reducer

在开发模式下，它工作得很好。但是当我将它更新到生产 APK/IPA 时，它总是返回未定义，我不知道如何。我已经尝试搜索了两天，但仍然不明白为什么。

感谢您阅读此问题，我希望有人可以帮助我:)

标签： reactjsreact-nativereduxreact-reduxredux-persist

解决方案

我认为你的mapStateToProps功能有问题。如果您将其更改为具有状态对象（BibleReducer）而不在函数的参数列表中解构赋值，那么您将根据需要在hightlightedVerse属性中获得值。

您可以通过调试或console.log(BibleReducer)测试来检查变量值在代码中的显示位置和方式。

原始的一个 - 从您的代码中解构值未定义：

function mapStateToProps({BibleReducer}) {
  console.log(BibleReducer);

  return {
    highlightedVerse: BibleReducer.highlightedVerse,
  }
}

我猜是有效的 - 你应该有状态对象：

function mapStateToProps(BibleReducer) {
  console.log(BibleReducer);

  return {
    highlightedVerse: BibleReducer.highlightedVerse,
  }
}

请在此处进一步阅读有关解构分配的信息。

解构赋值语法是一种 JavaScript 表达式，它可以将数组中的值或对象中的属性解包到不同的变量中。

通过解构，您正在引用state.BibleReducer.highlightedVerse属性，我认为这就是为什么该值显示为未定义的原因。

让我知道这是否有效，如果需要，我们可以进一步考虑。

更新：如果您想使用仍然解构分配，那么您可以使用以下解决方案以仅使用highlightedVerse数组值：

function mapStateToProps({highlightedVerse}) {
   console.log(highlightedVerse);

   return {
      highlightedVerse: highlightedVerse,
   }
}

感谢@Clarity 的想法！

推荐阅读