使用 Redux Toolkit 在 React 中映射获取的数据

Question

我正在尝试使用 fetch API 获取我的数据库 (mongodb) 中的所有产品。我使用 Redux Toolkit 将结果存储在一个切片中。问题是当我将获取并存储的数据作为道具传递给组件时，结果没有显示出来。

切片

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

const initialState = {
  products: [],
};

const productSlice = createSlice({
  name: "product",
  initialState,
  reducers: {
    setProducts(state, action) {
      state.products.push(action.payload);
    },
  },
});

export const { setProducts } = productSlice.actions;

export default productSlice.reducer;

商店

import { configureStore } from "@reduxjs/toolkit";

import uiSlice from "./ui-slice";
import userSlice from "./user-slice";
import productSlice from './product-slice';

const store = configureStore({
  reducer: {
    ui: uiSlice,
    user: userSlice,
    products: productSlice
  },
});

export default store;

我用来获取产品的功能

export const fetchProduct = () => {
  return async (dispatch) => {
    try {
      const response = await fetch("http://localhost:xx/xxx");
      const data = await response.json();
      let loadedProducts = [];
      for (const key in data) {
        loadedProducts.push({
          id: data[key]._id,
          productName: data[key].productName,
          price: data[key].price,
          imageUrl: data[key].imageUrl,
        });
      }
      dispatch(setProducts(loadedProducts));
    } catch (error) {
      console.log(error);
    }
  };

我使用 useSelector 获取存储在我的 redux 状态中的值并使用它来获取产品

import { useEffect, useState } from "react";

import { useDispatch, useSelector } from "react-redux";
import { Container } from "react-bootstrap";
import { fetchProduct } from "../../actions/productActions";

import Hero from "../hero/Hero";
import Footer from "../footer/Footer";
import DisplayProductsList from "../displayProduct/DisplayProductsList";

export default function Home() {
  const productsInfo = useSelector((state) => state.products.products);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchProduct());
  }, []);
    
  return (
    <>
      <Hero />
      <DisplayProductsList products={productsInfo} />
      <Container fluid>
        <Footer></Footer>
      </Container>
    </>
  );
}

然后我映射它

export default function DisplayProductsList(props) {
  console.log(props) 
  return (
    <ul>
      {props.products.map((product) => (
        <DisplayProducts
        key={product.id}
        imageUrl={product.imageUrl}
        name={product.productName}
        price={product.price}
        />
      ))}
    </ul>
  );
}

控制台记录我发送的道具

如果我在控制台中记录选择器中的状态，这就是我得到的

后端代码

module.exports.fetchProduct = async (req, res) => {
  try {
    const products = await Product.find({});
    console.log(products)
    if (products) {
      res.json(products);
    }
  } catch (error) {
    console.log(error);
  }
};

Answer 1

正如我在您的代码中看到的，您将对象数组（即“loadedProducts”）存储到“products”中，它也是一个数组。像这样的东西： nested array

所以为了在 DisplayProductsList 组件中获取 productsInfo，而不是这样做：

{props.products.map((product) => (
        <DisplayProducts
        key={product.id}
        imageUrl={product.imageUrl}
        name={product.productName}
        price={product.price}
        />
))}

你应该这样做：

 {props.products[0].map((product) => (
   //rest of your code
      ))}