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

我想在数组状态中保存对象数据。 但是，当我尝试在reducer中调用一个操作时，当我尝试控制台.log（）它时，初始的_STATE.highlightedVerse总是导致未定义。它应该是一个空数组，而不是未定义的数组

这些是我在package.json中使用的依赖项 世博会v32.0.0， 反应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时，它总是返回未定义的，我不知道如何返回。我已经找了两天了，但还是不明白为什么

---

感谢您阅读本期文章，我希望有人能在这方面帮助我：）

谢谢@Clarity@Yossi@Domino987

这是我的商店/index.js

import { AsyncStorage } from 'react-native'
import storage from 'redux-persist/lib/storage'
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import reducers from 'ndc-ministry/redux/reducers'

const persistConfig = {
  key: 'root',
  storage: AsyncStorage
}

const persistedReducer = persistReducer(persistConfig, reducers)

export const store = createStore(
  persistedReducer,
)

export const persistor = persistStore(store)

奇怪的是，我的redux中的每一个状态都被很好地存储和持久化了，除非状态是数组。这就是我在React组件中分派操作的方式

 import { addBibleVerseHighlight } from 'project-name/redux/actions'
    class BibleScreen extends Component {

addHighlight = () => {
    this.state.selectedVersesIndex.map((value) => {
      const verseData = {
        bookIndex: this.props.selectedBookIndex,
        chapterIndex: this.props.selectedChapterIndex,
        verseIndex: value,
      }

        this.props.addBibleVerseHighlight(verseData)

    })
  }

    render() { ... }
    }


    function mapStateToProps({BibleReducer}) {
      return {
        highlightedVerse: BibleReducer.highlightedVerse,
      }
    }

    const mapDispatchToProps = {
      addBibleVerseHighlight,
      removeBibleVerseHighlight,
    }

    export default connect(mapStateToProps, mapDispatchToProps)(BibleScreen)

---

我想您在

mapstatetops

函数中遇到了问题。如果您将其更改为在函数的参数列表中具有状态对象（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,
  }
}

请进一步阅读有关解构分配的信息

destructuring assignment语法是一个JavaScript表达式，它可以将数组中的值或对象中的属性解压缩到不同的变量中

使用destructuring时，您将引用state.BibleReducer.highlightedVerse属性，我认为这就是为什么该值显示为未定义

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

更新： 如果要使用still destructuring assigment，则可以使用以下解决方案，仅使用

highlightedVerse

数组值：

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

   return {
      highlightedVerse: highlightedVerse,
   }
}

---

谢谢@Clarity的创意

我要说的是简化减速器并删除

highlightedVerse

字段。 然后将状态视为数组，而不是对象的数组

因此，在适用的情况下，将

{}

更改为

[]

例如（未经测试）：

这样，在您的初始状态下，您的商店。。。您的

highlightedVerse

字段可以是空数组，您可以将此缩减器设置为该字段的缩减器

---

祝你好运。

你需要展示你如何连接你的组件、你的动作调度器以及你的根减速机是如何设置的。听起来有些事情不容易解决。启动应用程序时显式初始化它怎么样？你能告诉我们你创建商店的代码吗？你可以通过编辑它将代码移到你的问题。它可以是

const-mapStateToProps=（state）=>（{highlightedVerse:state.highlightedVerse，}）

我认为这不是问题，因为我使用了combinedReducer，它可以正常处理其他文件。我已经把一切记录到减速机上了。我看到了动作。有效载荷工作正常。但是当I console.log（state.highlightedVerse）执行类似console.log（state）的日志记录时，reducer打印未定义的值；仅？@norbitrial它打印对象{“highlightedVerse”：数组[]，“notedVerse”：数组[]，“selectedBookIndex”：0，“selectedChapterIndex”：0，“selectedVerseIndex”：0，}你好！谢谢你的回答。实际上在我的真实案例中，初始状态有很多字段。不止一个。我只是简化了上面的代码，因为它太多，无法显示所有内容。我意识到问题是在初始状态下，默认值是array。其他初始状态没有问题

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

const INITIAL_STATE = [];

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

  switch (action.type) {
    case ADD_BIBLE_VERSE_HIGHLIGHT:
      const currentHighlightedVerse = [...state];

      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, action.payload];


    case REMOVE_BIBLE_VERSE_HIGHLIGHT:
      const deletedHighlightVerse = state.filter(obj => JSON.stringify(action.payload) != JSON.stringify(obj))

      return deletedHighlightVerse;

    default:
      return state

  }
}

export default reducer