React Native AsyncStorage 錯誤:TypeError - 未定義不是函數(靠近'...state.reduce...”)
P粉734486718
P粉734486718 2023-08-29 16:54:51
0
1
451

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

從「./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}>
         <主要>
          >    ) }

這是reducer的程式碼: 計量器.js:

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) } 預設: { 返回狀態 } } } 匯出預設減速器

編輯

持久化的reducer將需要陣列更改為物件。我想我改變我的程式碼以適應這個。有任何關於為什麼會發生這種情況的想法嗎?

使用普通reducer的state物件:

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

使用持久化reducer的state物件:

{"0": {"body": "my first note", "id": 1}, "1": { "body": "my second note", "id": 2}, "2": {"body": "my third note", "id": 3}<t; ; 

修復

減速器.js

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

選擇器:

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

我必須刪除第-1個元素,因為persistor包含一個額外的屬性: {"0": {"body": "嗨", "id": 7}, "1": {"body": "", "id": 8}, "2": {" body" :"”,"id":9},"_persist":{“重新水合”:true,“版本”:-1}}

P粉734486718
P粉734486718

全部回覆 (1)
P粉111927962

為什麼會出現TypeError錯誤?

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

物件沒有reduce方法

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

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

這是一個bug嗎?

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

如何修復它?

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

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

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!