React Native AsyncStorage 錯誤：TypeError - 未定義不是函數（靠近“...state.reduce...”）

Question

<p>我正在使用AsyncStorage尝试在我的React应用中持久化我的redux状态，但是我遇到了这个错误：<code>TypeError: undefined is not a function (near '...state.reduce...')</code>。 我查看了其他类似错误的答案，但没有成功。我甚至不确定哪个是undefined，因为它只是说“near”。我已經檢查了stateobject，它不是空的。 這是我的主要代碼： 應用程式.js：</p>

從「./src/components/Main」匯入Main
從“react-router-native”導入 { NativeRouter }
從“redux”導入{createStore}
從“react-redux”導入{Provider}
從“./src/reducer”導入減速器
從“@react-native-async-storage/async-storage”導入AsyncStorage
從「redux-persist」導入{ persistStore, persistReducer }
從「redux-persist/integration/react」匯入{PersistGate}
從“./src/components/Text”導入文字

常量持久配置 = {
  鍵：“根”，
  存儲：異步存儲，
}

const persistedReducer = persistReducer(persistConfig, 減速​​器)

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

導出預設函數 App() {
  返回 （
    <本機路由器>
      <提供商商店={商店}>
        正在載入...} persistor={persistor}>
          <主要>>
        </持久門>
      </提供者>
    </NativeRouter>
  ）
}</pre>
這是reducer的程式碼：
計量器.js：</p>
const reducer = (state = [], action) =>; {
  開關（動作.類型）{
    案例“NEW_NOTE”：{
      console.log(“狀態：>>”，狀態)
      const max = 狀態.reduce(
        （上一個，當前）=> {
          // if (!current) 回上一個
          返回當前.id >上一個 ID ？當前 : 上一個
        },
        { id：0，內文：“” }
      ）
      const newNote = { id: max.id 1, body: ""; }
      返回state.concat(newNote)
    }
    案例“UPDATE_NOTE”：{
      const newNotes = state.filter((note) => action.data.id !== note.id)
      返回 [action.data, ...newNotes]
    }
    案例“DELETE_NOTE”：{
      return state.filter((note) => action.id !== note.id)
    }
    預設: {
      返回狀態
    }
  }
}

匯出預設減速器
編輯
<p>持久化的reducer將需要陣列更改為物件。我想我改變我的程式碼以適應這個。有任何關於為什麼會發生這種情況的想法嗎？ </p>
<p>使用普通reducer的state物件：</p>
<pre class="brush:php;toolbar:false;">[{"body": "Ddtstostksoyoyyxcuj", "id": 2}, {"body": "Ftistldpupf;
Hhxgjbv", "id": 1}]</pre>
<p>使用持久化reducer的state物件：</p>
<pre class="brush:php;toolbar:false;">{"0": {"body": "my first note", "id": 1}, "1": { "body": "my second note", "id": 2}, "2": {"body": "my third note", "id": 3}<t; ;
<h1>修復</h1>
<p>減速器.js</p>
<pre class="brush:php;toolbar:false;">const reducer = (state = [], action) => {
  state = Object.values(state)
  ...</pre>
<p>選擇器：</p>
<pre class="brush:php;toolbar:false;">const notes = useSelector((state) => Object.values(state).slice(0, -1))</pre>
<p>我必須刪除第-1個元素，因為persistor包含一個額外的屬性：
<code>{"0": {"body": "嗨", "id": 7}, "1": {"body": "", "id": 8}, "2": {" body" ："”，"id"：9}，"_persist"：{“重新水合”：true，“版本”：-1}}</code></p>

Answer 1

為什麼會出現TypeError錯誤？

你遇到了這個錯誤TypeError: undefined is not a function (near '...state.reduce...')，因為state不是一個數組，而是一個物件

物件沒有reduce方法

為什麼react-persist會把你的陣列轉換成物件？

在react-persist原始程式碼的這一行中，你可以看到let { _persist, ...rest } = state || {}。像這樣展開數組會導致它被轉換成物件。

這是一個bug嗎？

可能是的，我在文件中找不到狀態必須是物件的任何資訊。

如何修復它？

要嘛將你的狀態包裝在一個物件中，而不是直接使用陣列

要嘛每次使用時將物件轉換回數組