React Native AsyncStorage エラー: TypeError - 未定義は関数ではありません (「...state.reduce...」付近)

Question

AsyncStorage を使用して Redux 状態を React アプリで永続化しようとしていますが、次のエラーが発生します: TypeError: unknown is not a function (near '...state.reduce. ..')。 同様のエラーが発生した他の回答も調べましたが、成功しませんでした。 「近い」とだけ書かれているので、どれが未定義なのかさえわかりません。私は状態オブジェクトを検査しましたが、空ではありませんでした。 これは私たちの主代コードです： 应用程序.js：

「./src/components/Main」から Main をインポートします。
「react-router-native」からインポート { NativeRouter }
「redux」からインポート { createStore }
「react-redux」から { プロバイダ } をインポートします。
「./src/reducer」からリデューサーをインポートします。
「@react-native-async-storage/async-storage」から AsyncStorage をインポートします。
import {persistStore,persistReducer} from "redux-persist"
「redux-persist/integration/react」から { PersistGate } をインポートします。
「./src/components/Text」からテキストをインポートします。

constpersistConfig = {
  キー: "ルート"、
  ストレージ: AsyncStorage、
}

constpersistedReducer =persistReducer(persistConfig、reducer)

const store = createStore(persistedReducer)
constpersistor =persistStore(ストア)

デフォルト関数 App() をエクスポート {
  戻る （
    <ネイティブルーター>
      <プロバイダストア={ストア}>
        <PersistGateloading={<Text>Loading...</Text>}persistor={persistor}>
          <メイン />
        </PersistGate>
      </プロバイダー>
    </NativeRouter>
  )
}

これはリデューサーの代コードです: 减速器.js：

const raiser = (state = [], action) => {
  スイッチ (アクション.タイプ) {
    ケース「NEW_NOTE」: {
      console.log("状態 :>> ", 状態)
      const max = state.reduce(
        (前、現在) => {
          // if (!current) return prev
          current.id を返す >前のID ?現在: 前
        }、
        { id: 0、本文: "" }
      )
      const newNote = { id: max.id 1、本文: "" }
      state.concat(newNote)を返す
    }
    ケース「UPDATE_NOTE」: {
      const newNotes = state.filter((note) =>action.data.id !== note.id)
      return [action.data, ...newNotes]
    }
    ケース「DELETE_NOTE」: {
      return state.filter((note) =>action.id !== note.id)
    }
    デフォルト： {
      状態を返す
    }
  }
}

デフォルトのリデューサー

をエクスポートします。

编辑

継続的なリデューサは、対象となる数値セットをさらに変更する必要があると考えています。なぜこれが起こっているのかについて何か考えはありますか?

通常のレデューサーの状態オブジェクトを使用します:

[{"body": "Ddtstostksoyoyyxcuj", "id": 2}, {"body": "Ftistldpufipf"
Hhxgjbv", "id": 1}]
<p>永続リデューサーの状態オブジェクトを使用します: </p>
<pre class="brush:php;toolbar:false;">{"0": {"body": "私の最初のメモ", "id": 1}, "1": { "body": "2 番目のメモ", "id": 2}, "2": {"body": "3 番目のメモ", "id": 3}}

;

修理

reducer.js

const raiser = (state = [], action) => {
  状態 = オブジェクト.値(状態)
  ...

セレクター:

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

パーシスターには余分な属性が含まれているため、-1 番目の要素を削除する必要があります。 <コード>{"0": {"本文": "こんにちは", "id": 7}, "1": {"本文": "", "id": 8}, "2": {" body": "", "id": 9}, "_persist": {"re水和物": true, "version": -1}}

Answer 1

TypeError が発生するのはなぜですか?

このエラーが発生しました TypeError: unknown は関数 ('...state.reduce...' の近く) ではありません。state は配列ではなく、物体＃＃＃

オブジェクトには

reduceメソッドがありません

react-persist

が配列をオブジェクトに変換するのはなぜですか? react-persist

ソース コードの

行 で、let { _persist, ...rest } = state || {} を確認できます。 。このように配列を展開すると、配列がオブジェクトに変換されます。 これはバグですか?

おそらくそうです。ドキュメントには、状態がオブジェクトでなければならないという情報は見つかりません。

それを修正するにはどうすればよいですか?

配列を直接使用する代わりに、状態をオブジェクトでラップします

オブジェクトが使用されるたびに、オブジェクトを配列に変換して戻します