Nativer AsyncStorage-Fehler reagieren: TypeError – undefiniert ist keine Funktion (in der Nähe von „...state.reduce...“)

Question

Ich verwende AsyncStorage, um zu versuchen, meinen Redux-Status in meiner React-App beizubehalten, erhalte jedoch die folgende Fehlermeldung: TypeError: undefined is not a function (near '...state.reduce. ..'). Ich habe mir andere Antworten mit ähnlichen Fehlern angesehen, aber keinen Erfolg. Ich bin mir nicht einmal sicher, welches undefiniert ist, da dort nur „nahe“ steht.我已经检查了state对象, 它不是空的. 这是我的主要代码: 应用程序.js:

import Main from "./src/components/Main"
import { NativeRouter } aus „react-router-native“
import { createStore } aus "redux"
import { Provider } from "react-redux"
Reduzierer importieren aus „./src/reducer“
Importieren Sie AsyncStorage aus „@react-native-async-storage/async-storage“
import { persistStore, persistReducer } aus „redux-persist“
import { PersistGate } aus „redux-persist/integration/react“
Importieren Sie Text aus "./src/components/Text"

const persistConfig = {
  Schlüssel: "root",
  Speicher: AsyncStorage,
}

const persistedReducer = persistReducer(persistConfig, Reducer)

const store = createStore(persistedReducer)
const persistor = persistStore(store)

Standardfunktion App() exportieren {
  zurückkehren (
    <NativeRouter>
      <Provider store={store}>
        <PersistGate Loading={<Text>Loading...</Text>} persistor={persistor}>
          <Haupt />
        </PersistGate>
      </Anbieter>
    </NativeRouter>
  )
}

这是reduzierer的代码： 减速器.js:

const Reducer = (state = [], action) => {
  switch (action.type) {
    Fall "NEW_NOTE": {
      console.log("state :>> ", state)
      const max = state.reduce(
        (vorher, aktuell) => {
          // if (!current) return prev
          return current.id > prev.id ? aktuell: vor
        },
        { id: 0, body: "" }
      )
      const newNote = { id: max.id + 1, body: "" }
      return state.concat(newNote)
    }
    Fall „UPDATE_NOTE“: {
      const newNotes = state.filter((note) => action.data.id !== note.id)
      return [action.data, ...newNotes]
    }
    case "DELETE_NOTE": {
      return state.filter((note) => action.id !== note.id)
    }
    Standard: {
      Rückkehrzustand
    }
  }
}

Standardreduzierer exportieren

编辑

有任何关于为什么会发生这种情况的想法吗？

使用普通reducer的state对象：

[{"body": "Ddtstostksoyoyyxcuj", "id": 2}, {"body": "Ftistldpufipf 
Hhxgjbv", "id": 1}]

使用持久化reducer的state对象：

{"0": {"body": "my first note", "id": 1}, "1": { "body": "meine zweite Note", "id": 2}, "2": {"body": "meine dritte Note", "id": 3}}

;

修复

减速器.js

const Reducer = (state = [], action) => {
  state = Object.values(state)
  ...

选择器:

const NOTES = useSelector((state) => Object.values(state).slice(0, -1))

{"0": {"body": "嗨", "id": 7}, "1": {"body": "", "id": 8}, "2": {" body": „“, „id“: 9}, „_persist“: {“重新水合“: true, „版本“: -1}}

Answer 1

为什么会出现TypeError错误？

你遇到了这个错误TypeError: undefined is not a function (near '...state.reduce...')，因为state不是一个数组，而是一个对象

对象没有reduce方法

为什么react-persist会把你的数组转换成对象？

在react-persist源代码的这一行中，你可以看到let { _persist, ...rest } = state || {}。像这样展开数组会导致它被转换成对象。

这是一个bug吗？

可能是的，我在文档中找不到状态必须是对象的任何信息。

如何修复它？

要么将你的状态包装在一个对象中，而不是直接使用数组

要么每次使用时将对象转换回数组