狀態未轉移到另一個組件時出現問題

我遇到一個問題，一個組件產生的值無法傳遞給另一個組件。我在頂部組件中做了一個狀態，我認為我連接得很好。但是由狀態組成的所需陣列是空的。很抱歉問了這么長的代碼。

下面的代碼是最重要的組件，InCart是我遇到問題的狀態。

應用程式.js：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Site from './Site/Site';
import { useState } from 'react';
import RealCart from './RealCart/RealCart';


function App() {

  const [Inproducts,setInproducts] = useState([])
  const [InCart, setInCart] = useState([]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path='/realCart' element={<RealCart InCart={InCart} setInCart={setInCart}/>} />
        <Route path='/loginHome' element={<Site InCart={InCart} setInCart={setInCart} Inproducts={Inproducts} setInproducts={setInproducts}/>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

中間連接了很多組件，所以我省略了它，但道具也是連接的。我從這里得到了 json 檔案。

Section5Bottom.jsx：

import axios from 'axios';
    import React, { useEffect } from 'react';
    import "../section5.css";
    import Section5Card from './Section5Card';
    
    function Section5Bottom({Inproducts, setInproducts, InCart, setInCart}) {
    
      
      useEffect (()=> {
        axios.get("/data/products.json").then((data)=>{
          setInproducts(data.data.products);
        });
      },[setInproducts]);
    
      return (
        <div id='Section5Bottom'>
          {
            Inproducts.map((product)=>{
              return <Section5Card key={`key-${product.id}`} product={product} InCart={InCart} setInCart={setInCart}/>
            })
          }
        </div>
      )
    }
    
    export default Section5Bottom;

當我點擊檔案下方的圖示時，我使用InCartApp.js 中的 make 將所選卡片的陣列值放入陣列中。如果我在這里檢查控制臺，則陣列很好，如這張照片所示。

Section5Card.jsx：

import '../section5.css';
import {FaCartPlus} from 'react-icons/fa';
import { useDispatch } from 'react-redux';
import './card.css';

function Section5Card({product, InCart, setInCart}) {

  const dispatch = useDispatch();

  const handleCart = () => {
    const cartItem = {
      id : product.id,
      image : product.image,
      provider : product.provider,
      price : product.price,
      name : product.name
    }
    setInCart([...InCart, cartItem])
  }



  return (
   <div>
    <div id='CardWrap'>
          <div>
            <img id='Section5CardImg' src={product.image} />
          </div>
          //************************************
          <div>
            <FaCartPlus size='20' style={{color:'black', position:'relative', top:'124px', left:'130px', cursor:'pointer'}} onClick={()=>{dispatch({type:"ADD"}); handleCart()}} />
          </div>  
          //*************************************      
          <div id='CardBot'>
            <div id='CardBotBPrice'>
              ?{product.price}
            </div>
            <div id='CardBotTag'>
              {product.people?
              <span id='CardBotTagPeople'>
                {product.people}?
              </span>:
              <>
                <span id='CardBotTagSale'>
                  {product.sale}
                </span>
              </>}            
          </div>          
        </div>
      </div>  
   </div>
  )
}

export default Section5Card;

下面的檔案是我希望在該InCart州提出的檔案。但即使我用控制臺檢查，陣列也是空的，如下所示：

RealCart.jsx：

import React from 'react'
import Top from '../Site/Header/Top'
import Navi from '../Site/Header/Navi/Navi'
import Cart from './Components/Cart';
import CartHeader from './Components/CartHeader';

function RealCart(InCart, setInCart) {

  console.log(InCart)

  return (
    <div>
      <Top />
      <Navi />
      <Cart />
      <CartHeader />
    </div>
  )
}

export default RealCart;

uj5u.com熱心網友回復：

在你的 RealCart.jsx 檔案中，你必須用 {} 包裝你的道具，它會像

function RealCart({InCart, setInCart}) {

console.log(InCart)

return (
 <div>
  <Top />
  <Navi />
  <Cart />
  <CartHeader />
 </div>
 )
}

標籤：反应

上一篇：React組件在從API成功獲取資料之前渲染，因此無法渲染MUI的TreeItem

下一篇：從嵌套物件中獲取鍵和值