错误 - 在状态中检测到不可序列化的值，路径为：“products”。值：{"_x":0"_y",_z":null,"_A":null}

Question

我基本上试图将喜欢/不喜欢的状态保存在我尝试使用 axios 从 API 获取的产品列表中，但出现以下错误。

在状态中检测到不可序列化的值，路径为：“products”。值：{"_x":0"_y",_z":null,"_A":null}

为了保存状态，我尝试使用 Redux Toolkit。下面我有productSlice组件和ProductListScreen组件的代码。

产品切片.js

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const productsSlice = createSlice({
  name: "products",
  initialState: { items: [], likes: [] },
  reducers: {
    fetchProducts: async (state) => {
      const response = await axios.get("https://dummyjson.com/products");
      state.items = response.data;
      state.likes = new Array(state.items.length).fill(false);
    },
    toggleLike: (state, action) => {
      state.likes[action.payload.index] = action.payload.isLiked;
    },
  },
});

export const { fetchProducts, toggleLike } = productsSlice.actions;

export default productsSlice.reducer;

产品列表屏幕.js

import { useEffect, useState } from "react";
import { FlatList, Text, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { fetchProducts, toggleLike } from "./productsSlice";

const ProductListScreen = () => {
  const products = useSelector((state) => state.products.items);
  const likes = useSelector((state) => state.products.likes);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchProducts());
  }, []);

  const handleLike = (index, isLiked) => {
    dispatch(toggleLike({ index, isLiked }));
  };

  const renderItem = ({ item, index }) => (
    <View>
      <Text>{item.title}</Text>
      <LikeDislikeButton
        productId={item.id}
        liked={likes[index]}
        onPress={() => handleLike(index, !likes[index])}
      />
    </View>
  );

  return (
    <View>
      <FlatList
        data={products}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

export default ProductListScreen;

Answer 1

减速器函数应该是纯同步函数。您已经声明了隐式返回 Promise 对象的reducerfetchProducts函数。这是存储在 中的不可序列化对象。asyncstate.products

您应该创建并使用异步操作（即 Thunk）来进行异步 API 调用。重构fetchProducts为异步操作。使用productSlice来extraReducers处理从 thunk 返回的已履行的 Promise fetchProducts。

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

export const fetchProducts = createAsyncThunk(
  "products/fetchProducts",
  async () => {
    const response = await axios.get("https://dummyjson.com/products");
    return response.data;
  },
);

const productsSlice = createSlice({
  name: "products",
  initialState: { items: [], likes: [] },
  reducers: {
    toggleLike: (state, action) => {
      state.likes[action.payload.index] = action.payload.isLiked;
    },
  },
  extraReducers: builder => {
    builder
      .addCase(fetchProducts.fulfilled, (state, action) => {
        const { products } = action.payload;
        state.items = products;
        state.likes = new Array(products.length).fill(false);
      });
  },
});

export const { toggleLike } = productsSlice.actions;

export default productsSlice.reducer;