React Native AsyncStorage Ralat: TypeError - undefined bukan fungsi (berhampiran "...state.reduce...")

Question

Saya menggunakan AsyncStorage untuk cuba mengekalkan keadaan redux saya dalam apl React saya, tetapi saya mendapat ralat ini: TypeError: undefined bukan fungsi (berhampiran '...state.reduce. ..'). Saya melihat jawapan lain dengan ralat yang sama tetapi tidak berjaya. Saya tidak pasti yang mana satu tidak ditentukan kerana ia hanya berkata "dekat".我已经检查了state对象，它不是空的。 这是我的主要代码： 应用程序.js：

import Utama daripada "./src/components/Main"
import { NativeRouter } daripada "react-router-native"
import { createStore } daripada "redux"
import { Provider } daripada "react-redux"
import pengurangan daripada "./src/reducer"
import AsyncStorage daripada "@react-native-async-storage/async-storage"
import { persistStore, persistReducer } daripada "redux-persist"
import { PersistGate } daripada "redux-perist/integration/react"
import Teks daripada "./src/components/Teks"

const persistConfig = {
  kunci: "root",
  storan: AsyncStorage,
}

const persistedReducer = persistReducer(peristConfig, reducer)

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

eksport fungsi lalai App() {
  kembali (
    <NativeRouter>
      <Kedai pembekal={kedai}>
        <PersistGate loading={<Teks>Memuatkan...</Text>} persistor={persistor}>
          <Utama />
        </PersistGate>
      </Pembekal>
    </NativeRouter>
  )
}

这是pengurang的代码： 减速器.js：

const reducer = (state = [], action) => {
  suis (action.type) {
    kes "NOTA_BARU": {
      console.log("nyatakan :>> ", negeri)
      const max = state.reduce(
        (sebelumnya, semasa) => {
          // jika (!semasa) kembali sebelum
          kembalikan current.id > prev.id ? semasa : sebelum
        },
        { id: 0, badan: "" }
      )
      const newNota = { id: max.id + 1, badan: "" }
      kembalikan state.concat(newNote)
    }
    kes "UPDATE_NOTE": {
      const newNotes = state.filter((note) => action.data.id !== note.id)
      kembalikan [action.data, ...newNotes]
    }
    kes "DELETE_NOTE": {
      kembalikan state.filter((nota) => action.id !== note.id)
    }
    lalai: {
      keadaan kembali
    }
  }
}

eksport pengurang lalai</pra>
<h1>编辑</h1>
<p>持久化的reducer将数组更改为对象。我想我需要改变我的代码以适应这个。有任何关于为什么会发生这种情况的想法吗？</p>
<p>使用普通pengurang的state对象：</p>
<pre class="brush:php;toolbar:false;">[{"body": "Ddtstostksoyoyyxcuj", "id": 2}, {"body": "Ftistldpufipf 
Hhxgjbv", "id": 1}]

使用持久化pengurang的state对象：

{"0": {"body": "nota pertama saya", "id": 1}, "1": { "badan": "nota kedua saya", "id": 2}, "2": {"badan": "nota ketiga saya", "id": 3}}</pra> ;
<h1>修复</h1>
<p>减速器.js</p>
<pre class="brush:php;toolbar:false;">const reducer = (state = [], action) => {
  keadaan = Object.values(state)
  ...</pra>
<p>选择器：</p>
<pre class="brush:php; toolbar:false;">const notes = useSelector((state) => Object.values(state).slice(0, -1))

我必须删除第-1个元素，因为persistor包含一个额外的属性： {"0": {"body": "嗨", "id": 7}, "1": {"body": "", "id": 8}, "2": {" badan" ：“”，“id”：9}，“_berterusan”：{“重新水合”：true，“版本”：-1}}

Answer 1

Mengapa TypeError berlaku?

Anda mendapat ralat iniTypeError: undefined is not a function (near '...state.reduce...')，因为stateIa bukan tatasusunan, ia adalah objek

Objek tiada reducekaedah

Mengapareact-persisttukar tatasusunan anda kepada objek?

Dalam react-persist源代码的这一行中，你可以看到let { _persist, ...rest } = state || {} kod sumber baris ini, anda boleh melihat biarkan { _persist, ...rest } = state ||. Membuka tatasusunan seperti ini menyebabkan ia ditukar menjadi objek.

Adakah ini pepijat?

Mungkin ya, saya tidak dapat mencari sebarang maklumat dalam dokumentasi bahawa keadaan mesti menjadi objek.

Bagaimana untuk membetulkannya?

Sama ada bungkus keadaan anda dalam objek dan bukannya menggunakan tatasusunan secara langsung

Atau tukar objek kembali kepada tatasusunan setiap kali anda menggunakannya