Nativer AsyncStorage-Fehler reagieren: TypeError – undefiniert ist keine Funktion (in der Nähe von „...state.reduce...')
P粉734486718
2023-08-29 16:54:51
<p>Ich verwende AsyncStorage, um zu versuchen, meinen Redux-Status in meiner React-App beizubehalten, erhalte jedoch die folgende Fehlermeldung: <code>TypeError: undefined is not a function (near '...state.reduce. ..')</code>.
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:</p>
<pre class="brush:php;toolbar:false;">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>
)
}</pre>
<p>这是reduzierer的代码：
减速器.js:</p>
<pre class="brush:php;toolbar:false;">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</pre>
<h1>编辑</h1>
<p>有任何关于为什么会发生这种情况的想法吗？</p>
<p>使用普通reducer的state对象：</p>
<pre class="brush:php;toolbar:false;">[{"body": "Ddtstostksoyoyyxcuj", "id": 2}, {"body": "Ftistldpufipf
Hhxgjbv", "id": 1}]</pre>
<p>使用持久化reducer的state对象：</p>
<pre class="brush:php;toolbar:false;">{"0": {"body": "my first note", "id": 1}, "1": { "body": "meine zweite Note", "id": 2}, "2": {"body": "meine dritte Note", "id": 3}}</pre> ;
<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>
<code>{"0": {"body": "嗨", "id": 7}, "1": {"body": "", "id": 8}, "2": {" body": „“, „id“: 9}, „_persist“: {“重新水合“: true, „版本“: -1}}</code></p>
为什么会出现TypeError错误？
你遇到了这个错误
TypeError: undefined is not a function (near '...state.reduce...')，因为state不是一个数组，而是一个对象对象没有
reduce方法为什么
react-persist会把你的数组转换成对象？在
react-persist源代码的这一行中，你可以看到let { _persist, ...rest } = state || {}。像这样展开数组会导致它被转换成对象。这是一个bug吗？
可能是的，我在文档中找不到状态必须是对象的任何信息。
如何修复它？
要么将你的状态包装在一个对象中，而不是直接使用数组
要么每次使用时将对象转换回数组