React Native AsyncStorage Ralat: TypeError - undefined bukan fungsi (berhampiran "...state.reduce...")
P粉734486718
2023-08-29 16:54:51
<p>Saya menggunakan AsyncStorage untuk cuba mengekalkan keadaan redux saya dalam apl React saya, tetapi saya mendapat ralat ini: <code>TypeError: undefined bukan fungsi (berhampiran '...state.reduce. ..')</kod>.
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:</p>
<pre class="brush:php;toolbar:false;">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>
)
}</pre>
<p>这是pengurang的代码:
减速器.js:</p>
<pre class="brush:php;toolbar:false;">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}]</pre>
<p>使用持久化pengurang的state对象:</p>
<pre class="brush:php;toolbar:false;">{"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))</pre>
<p>我必须删除第-1个元素,因为persistor包含一个额外的属性:
<kod>{"0": {"body": "嗨", "id": 7}, "1": {"body": "", "id": 8}, "2": {" badan" :“”,“id”:9},“_berterusan”:{“重新水合”:true,“版本”:-1}}</code></p>
Mengapa TypeError berlaku?
Anda mendapat ralat ini
TypeError: undefined is not a function (near '...state.reduce...')
,因为state
Ia bukan tatasusunan, ia adalah objekObjek tiada
reduce
kaedahMengapa
react-persist
tukar tatasusunan anda kepada objek?Dalam
react-persist
源代码的这一行中,你可以看到let { _persist, ...rest } = state || {}
kod sumber baris ini a>, anda boleh melihatbiarkan { _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