DeleteOrder is not a function, что не так?

Question

[Sp1rka]

Я добавляю в массив orders (корзину) items, когда я на странице Home, то в корзине я могу удалить нужный мне item, но когда уже я перехожу на Orders, выдает ошибку:

deleteOrder is not a function
TypeError: deleteOrder is not a function
Любая помощь будет очень полезна:)

Home.jsx

import React , { useEffect, useState } from 'react'

import ItemComponent from '../components/ItemComponent'
import Search from '../components/Search';
import Header from '../components/Header';



export default function Home() {
  const [filteredItems, setFilteredItems] = useState([]);
  const [orders, setOrders] = useState([]);

  

  useEffect(() => {
    const fetchData = async () =>{
      const response = await fetch('http://localhost:3001/items')
      const data = await response.json()
      setFilteredItems(data)
    }
    fetchData()
  }, [])

  const handleFilterClick = () => {
    // Отправляем GET запрос на сервер с параметром фильтрации
    fetch(`http://localhost:3001/items?name=item1`)
      .then((response) => response.json())
      .then((data) => {
        setFilteredItems(data);
      })
      .catch((error) => {
        console.error('Ошибка при запросе данных:', error);
      });
  };

  const addOrders = (item) =>{
    setOrders((prevOrders) => [...prevOrders, item]); 
  }

  const deleteOrder = (orderId) => {
    setOrders((prevOrders) => prevOrders.filter((order) => order.id !== orderId));
  };


  return (
    <div>
    <Header filteredItems={filteredItems} orders={orders} deleteOrder={deleteOrder} />
    <div className='container'>
      <div className='row'>
        <div className='col-4'>
          <button className="btn btn-primary" type="button" onClick={handleFilterClick}>
            Filter
          </button>
          
        </div>
      </div>
      <Search setFilteredItems={setFilteredItems} />
      <div className="row">
        {filteredItems.length > 0
          ? filteredItems.map((item) => (
              <ItemComponent key={item.id} item={item} addOrders={addOrders}/>
            ))
          // : itemsData.map((item) => (
          //     <ItemComponent key={item.id} item={item} />
          //   ))
          :<h2>NOT FOUND</h2>
        }
      </div>


      
    </div>
    </div>
  );
}

Header.jsx

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { FaShoppingBasket } from "react-icons/fa";
import Order from './Order';



export default function Header({ filteredItems, orders, deleteOrder }) {

  
  const navigate = useNavigate();

  // const handleNavigateToAbout = () => {
  //   navigate("/about", { state: { filteredItems } });
  // };

  const handleNavigateToOrders = () => {
    navigate("/orders", { state: { orders } });
  };

  const showOrders = () =>{
  
    let summa = 0;
    orders.forEach(el => summa += Number.parseFloat(el.price))
    return(
      <div className='row'>
      {orders.map((item)=> (
       <Order item ={item} deleteOrder = {deleteOrder}/>
                  ))}
                  <div className='col-12'>
                 <p className='checkout mt-2 mb-2' onClick={handleNavigateToOrders}>Оформить заказ {new Intl.NumberFormat().format(summa)} р.</p></div>
                 </div> 
    )
  }
  
  
  const showNothing = () => {
    return (<div className='empty'>
      <h2>Товаров нет</h2>
    </div>)
  }

  
  

  let [cartOpen, setCartOpen] = useState(false)

  return (
    <header>
    <nav className="navbar navbar-expand-lg" style={{ backgroundColor: "#e3f2fd" }}>
      <div className="container-fluid">
        <a className="navbar-brand" href="#">
          Navbar
        </a>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            <li className="nav-item">
              <NavLink className="nav-link active" aria-current="page" to="/">
                Home
              </NavLink>
            </li>
            {/* <li className="nav-item">
              <button className="btn btn-primary" onClick={handleNavigateToAbout}>
                Корзина
              </button>
            </li> */}

            <li className="nav-item">
              <button className="btn btn-primary" onClick={handleNavigateToOrders}>
                Orders
              </button>
            </li>

            <div className='btn btn-itd2 btn-lg me-xl-5 delivery'>
              <FaShoppingBasket onClick={() => setCartOpen(cartOpen = !cartOpen)} className={`shop-cart-button ${cartOpen && 'active'}`}/></div>
        {cartOpen && (
          <div className='container shop-cart'>
                {orders.length > 0 ?
                showOrders(): showNothing()}
          </div>
        )}

          </ul>
        </div>
      </div>
    </nav>
    </header>
  );
}

Order.jsx

import React from 'react'
import { FaTrashAlt } from "react-icons/fa"

export default function Order({item, deleteOrder}) {
    

  return (

    <div className='row'>
    <h2>{item.name}</h2> 
    <FaTrashAlt className='delete-icon' onClick={() => deleteOrder(item.id)}/>
               </div> 
  )
}

Orders.jsx

import React from 'react'
import Header from '../components/Header';
import { useLocation } from "react-router-dom";


export default function Orders({deleteOrder}) {

    const location = useLocation();
    const orders = location.state.orders || [];
    
  

  return (
    
    <div><Header orders={orders} deleteOrder={deleteOrder}/>
     {orders.length > 0
          ? orders.map((item) => (
              <h2>{item.name}</h2> 
            ))
          : <h2>Not found</h2>
        }</div>
  )
}

Comments

[Alexandroppolus]

а где ты вызываешь Orders? Какие пропсы в него залетают?

[Sp1rka]

Orders вызываю в app.js через маршрутизацию

import { BrowserRouter, Route, Routes , useNavigate} from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home"
import About from "./pages/About"
import Orders from "./pages/Orders";
 
function App() {
  return (
    <div className="App">
      <BrowserRouter>
      
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/orders" element={<Orders/>}/>
      </Routes>
      
      </BrowserRouter>
    </div>
  );
}

export default App;

[chemdev]

убери из примера все лишнее, так может и помощь быстрее поспеет

[Sp1rka]

chemdev, уже разобрался с этим моментом, спасибо

[chemdev]

Sp1rka, тогда напиши ответ или удали вопрос