Erreur React Native AsyncStorage : TypeError - undefined n'est pas une fonction (près de "...state.reduce...")

Question

J'utilise AsyncStorage pour essayer de conserver mon état redux dans mon application React, mais j'obtiens cette erreur : TypeError : undefined n'est pas une fonction (près de '...state.reduce. ..'). J'ai regardé d'autres réponses avec des erreurs similaires mais sans succès. Je ne sais même pas lequel n'est pas défini puisqu'il dit simplement "près".我已经检查了state对象，它不是空的。 Le message suivant : 应用程序.js：

importer Main depuis "./src/components/Main"
importer { NativeRouter } depuis "react-router-native"
importer { createStore } depuis "redux"
importer { Fournisseur } depuis "react-redux"
importer un réducteur depuis "./src/reducer"
importer AsyncStorage depuis "@react-native-async-storage/async-storage"
import { persistStore, persistReducer } depuis "redux-persist"
importer { PersistGate } depuis "redux-persist/integration/react"
importer du texte depuis "./src/components/Text"

const persistConfig = {
  clé : "racine",
  stockage : AsyncStorage,
}

const persistedReducer = persistReducer (persistConfig, réducteur)

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

exporter la fonction par défaut App() {
  retour (
    <NativeRouter>
      <Magasin du fournisseur={magasin}>
        <PersistGate chargement={<Texte>Chargement...</Text>} persistor={persistor}>
          <Principal />
        </PersistGate>
      </Fournisseur>
    </NativeRouter>
  )
}</pré>
<p>这是réducteur的代码 :
减速器.js：</p>
<pre class="brush:php;toolbar:false;">const réducteur = (state = [], action) => {
  commutateur (action.type) {
    cas "NEW_NOTE" : {
      console.log("état :>> ", état)
      const max = state.reduce(
        (précédent, actuel) => {
          // si (!current) retourne précédent
          retourner current.id > identifiant précédent ? actuel : précédent
        },
        { identifiant : 0, corps : "" }
      )
      const newNote = { id : max.id + 1, corps : "" }
      retourner state.concat (newNote)
    }
    cas "UPDATE_NOTE" : {
      const newNotes = state.filter((note) => action.data.id !== note.id)
      renvoyer [action.data, ...newNotes]
    }
    cas "DELETE_NOTE" : {
      return state.filter((note) => action.id !== note.id)
    }
    défaut: {
      état de retour
    }
  }
}

exporter le réducteur par défaut

编辑

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

使用普通reducer的state对象：

[{"body" : "Ddtstostksoyoyyxcuj", "id" : 2}, {"body" : "Ftistldpufipf 
Hhxgjbv", "id": 1}]≪/pre>
<p>使用持久化reducer的state对象：</p>
<pre class="brush:php;toolbar:false;">{"0" : {"body": "ma première note", "id" : 1}, "1" : { "corps" : "ma deuxième note", "identifiant" : 2}, "2" : {"corps" : "ma troisième note", "identifiant" : 3}}

;

修复

减速器.js

const réducteur = (state = [], action) => {
  état = Objet.valeurs (état)
  ...</pré>
<p>选择器：</p>
<pre class="brush:php;toolbar:false;">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

Pourquoi une TypeError se produit-elle ?

Vous avez cette erreurTypeError: undefined is not a function (near '...state.reduce...')，因为stateCe n'est pas un tableau, c'est un objet

L'objet n'a pas de reduceméthodes

Pourquoireact-persistconvertir votre tableau en objet ?

Dans le react-persist源代码的这一行中，你可以看到let { _persist, ...rest } = state || {} code source cette ligne a>, vous pouvez voir let { _persist, ...rest } = state || Déplier un tableau comme celui-ci entraîne sa conversion en objet.

Est-ce un bug ?

Probablement oui, je ne trouve aucune information dans la documentation indiquant que l'état doit être un objet.

Comment y remédier ?

Soit enveloppez votre état dans un objet au lieu d'utiliser directement un tableau

Ou reconvertissez l'objet en tableau à chaque fois que vous l'utilisez