Material-ui 抽屜組件未呈現內部項目

Question

我正在使用React.js 、 @material-ui/core/Drawer和Redux編寫一個練習電子商務應用程序。 我遇到的問題是，每當我手動將某些內容渲染到Drawer時，它就會顯示在其中，但是，當我使用handleAddToCart function 向它渲染內容時，它不會在Drawer中顯示（渲染）。

這是cart組件代碼：

import { StyledButton } from './styles'
import Badge from '@material-ui/core/Badge'
import Drawer from '@material-ui/core/Drawer'
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'
import { useState } from 'react'
import { useSelector } from 'react-redux'
import { ProductPicture } from '../ProductPicture'

export const Cart = function() {
    const { cart } = useSelector(({productReducer}) => ({
      cart: productReducer.cart,
    }))

  const [openCart, setOpenCart] = useState(false)
  return(
    <>
      <StyledButton onClick={() => setOpenCart(true)}>
        <Badge color='error'>
          <AddShoppingCartIcon />
        </Badge>
      </StyledButton>
      <Drawer
        anchor='right'
        open={openCart}
        onClose={() => setOpenCart(false)}
      >
        {!!cart && cart.length > 0 && cart.map(product => {
          <section>
            <h3>Productos en tu carrito</h3>
            <img src={product.productPictures} /> 
            <p>price={product.price}</p> 
            <p>prodname={product.name}</p>
          </section>
          {console.log(cart)}
        })}
        <h3>Productos en tu carrito</h3>
      </Drawer>
    </>
  )
}

這是我調用cart組件的地方：

import axios from "axios"
import { StyledLink } from "./styles"
import { useEffect, useState } from "react"
import { useHistory } from "react-router"
import { Cart } from "../../Components/Cart"
import { NavBar } from "../../Components/Navbar"
import { useDispatch, useSelector } from "react-redux"
import { ProductPicture } from "../../Components/ProductPicture"
import { addToCart, changeProducts } from "../../store/productReducer"


function useApi() {
  const { products } = useSelector(({productReducer}) => ({
    products: productReducer.products,
  }))

  const [error, setError] = useState()
  
  const dispatch = useDispatch()

  useEffect(() => {
    async function getProducts() {
      try {
        const { data } = await axios({
          method: 'GET',
          baseURL: process.env.REACT_APP_SERVER_URL,
          url: '/products',
        })
        dispatch(changeProducts(data))
      }catch(error) {
        dispatch(setError(error))
      }
    }

    getProducts()

    return () => {
      
    }
  }, [])
  
  return { products }
  }
  
 export const HomePage = function() {
   const history = useHistory()
   const dispatch = useDispatch()
   
   function handleClick(prod)  {
     history.push(`/productinfo/${prod._id}`)
   }

   const handleAddToCart = prod => {
    dispatch(addToCart(prod))
  }

    const { products } = useApi()
    return (
      <section>
        <Cart />
        <NavBar />
        {!!products && products.length > 0 && products.map((prod, i) => (
          <section>
            <StyledLink onClick={() => handleClick(prod)}
            >
              <ProductPicture
                key={`chk-${i}`}
                picture={prod.productPictures}
                prodname={prod.name}
                price={prod.price}
              />
            </StyledLink>
            <button
              key={i}
              type='button'
              onClick={() => handleAddToCart(prod)}
            >
              Agregar al carrito
            </button>
          </section>
        ))}
      </section>
    )
}

這是Redux Reducer ，我在其中存儲state並從以下位置獲取它：

const CHANGE_PRODUCTS = 'CHANGE_PRODUCTS'
const ADD_TO_CART = 'ADD_TO_CART'
const CHANGE_AMOUNT = 'CHANGE_AMOUNT'

export function changeAmount(value) {
  return {
    type: CHANGE_AMOUNT,
    payload: value,
  }
}

export function changeProducts(value) {
  return {
    type: CHANGE_PRODUCTS,
    payload: value,
  }
}

export function addToCart(value) {
  return {
    type: ADD_TO_CART,
    payload: value,
  }
}
const initialSate = {
  products: {},
  cart: [],
  amount: 0,
}

export function productReducer(state = initialSate, action) {
  switch(action.type) {
    case CHANGE_PRODUCTS:
      return {
        ...state,
        products: action.payload,
      }
    case ADD_TO_CART:
      return {
        ...state,
        cart: [
          ...state.cart,
          action.payload
        ]
      }
    case CHANGE_AMOUNT:
        return {
          ...state,
          amount: action.payload,
        }
    default:
      return state
  }
}

而且，當我將東西添加到Drawer時會發生這種情況：

如上圖所示， cart數組中有 5 個產品，因此， cart.map()應該沒有問題地渲染項目，但是，唯一渲染給它的是<h3>Productos en tu carrito</h3>我手動放入測試。

非常感謝您對此事的幫助，如果答案太簡單，請考慮我缺乏經驗。

編輯：應用程序崩潰后開始顯示以下錯誤。

Answer 1

因為在HomePage下有const { products } = useApi()這意味着它只會在頁面第一次渲染時運行useApi()一次。

您可能希望將useEffect移動到HomePage中，並將products添加到useEffect(()=>{...}, []) []的 [] 中。

import axios from "axios"
import { StyledLink } from "./styles"
import { useEffect, useState } from "react"
import { useHistory } from "react-router"
import { Cart } from "../../Components/Cart"
import { NavBar } from "../../Components/Navbar"
import { useDispatch, useSelector } from "react-redux"
import { ProductPicture } from "../../Components/ProductPicture"
import { addToCart, changeProducts } from "../../store/productReducer"


export const HomePage = function () {
    const history = useHistory()
    const dispatch = useDispatch()

    const { products } = useSelector(({ productReducer }) => ({
        products: productReducer.products,
    }))

    const [error, setError] = useState()

    useEffect(() => {
        async function getProducts() {
            try {
                const { data } = await axios({
                    method: 'GET',
                    baseURL: process.env.REACT_APP_SERVER_URL,
                    url: '/products',
                })
                dispatch(changeProducts(data))
            } catch (error) {
                dispatch(setError(error))
            }
        }

        getProducts()

    }, [products])


    function handleClick(prod) {
        history.push(`/productinfo/${prod._id}`)
    }

    const handleAddToCart = prod => {
        dispatch(addToCart(prod))
    }

    return (
        <section>
            <Cart />
            <NavBar />
            {!!products && products.length > 0 && products.map((prod, i) => (
                <section>
                    <StyledLink onClick={() => handleClick(prod)}
                    >
                        <ProductPicture
                            key={`chk-${i}`}
                            picture={prod.productPictures}
                            prodname={prod.name}
                            price={prod.price}
                        />
                    </StyledLink>
                    <button
                        key={i}
                        type='button'
                        onClick={() => handleAddToCart(prod)}
                    >
                        Agregar al carrito
            </button>
                </section>
            ))}
        </section>
    )
}