React 将 useState 作为道具传递给我未定义？答案

【问题标题】：React passing useState as props gives me undefined?React 将 useState 作为道具传递给我未定义？
【发布时间】：2022-11-05 22:57:49
【问题描述】：

我不明白我的应用程序上发生了什么。我正在尝试制作一个简单的比萨店，您可以在其中简单地将产品添加到购物车中。我正在使用反应路由器，并且我已经使用 useState 初始化了购物车下拉菜单（当您单击购物车图标时，会出现购物车下拉菜单）。到目前为止没有问题。

现在我正在尝试使用 [cartItems, setCartItems] = useState([]); 设置状态在 App 中，能够将状态作为道具传递下去。我正在控制台中记录 App.js 中的 cartItems，我得到一个空数组。

现在我正在传递这样的道具，当我在控制台记录我在导航栏中得到的内容时，我得到了未定义。为什么会这样？

App.Js 代码在这里：

import Navbar from "./routes/Navbar";
import {useState} from 'react';
import Homepage from "./routes/Homepage";
import SignIn from "./routes/SignIn";
import Register from "./routes/Register";
import {Routes, Route} from 'react-router-dom';
import Menu from "./routes/Menu";
import pizzas from '../src/data';

function App() {

  const [cartItems, setCartItems] = useState([]);
  

  const onAdd = (product) => {
    const exist = cartItems.find(x => x.id === product.id);
    if(exist) {
      setCartItems(cartItems.map(x => x.id === product.id 
        ?
        {...exist, qty: exist.qty + 1}
        :
        x
        ))
    } else {
      setCartItems([...cartItems, {...product, qty: 1}]);
    }
  }

  return (
   <Routes>
     <Route  path='/' element={<Navbar onAdd={onAdd} cartItems={cartItems}/> }/>
     <Route index element={<Homepage /> }/>
     <Route path='/menu' element={<Menu pizzas={pizzas} onAdd={onAdd} /> }/>
     <Route path='/auth' element={<SignIn /> }/>
     <Route path='/register' element={<Register /> }/>
     
   </Routes>
  );
}

export default App;

和 Navbar.jsx 代码在这里：

import React from 'react';
import { useState } from 'react';
import styled from 'styled-components';
import LogoImg from '../assets/logo.png';
import { Link } from 'react-router-dom';
import CartIconComponent from '../components/CartIconComponent';
import CartDropdown from '../components/CartDropdown';

const Navbar = (props) => {

    const [cartOpen, setCartOpen] = useState(false);

    const {onAdd} = props;
    const {cartItems} = props;
    console.log(cartItems);
    

    const handleClick = () => {
        setCartOpen(!cartOpen);
    }
    
  return (
    <Container>
        <LogoContainer>
        <Link to='/'>
            <Logo src={LogoImg}/>
        </Link>
        </LogoContainer>
        
        <LinksContainer>
        <Link to='/menu'>
            OUR MENU
        </Link>
        <Link to='/auth'>
            SIGN IN
        </Link>
        <Link to='/register'>
            REGISTER
        </Link>
        <CartIconComponent 
        onPress={handleClick}
        cartOpen={cartOpen}
        
        
        />
        </LinksContainer>
        {cartOpen && <CartDropdown cartItems={cartItems} onAdd={onAdd}/>}
       
    </Container>
  )
}

先感谢您！

【问题讨论】：

标签： reactjs use-state react-props

【解决方案1】：

对不起，已经很久了。

我遇到了同样的问题，发现了这个：https://tkdodo.eu/blog/putting-props-to-use-state

基本上你需要一个“关键”道具才能插入一个道具作为 useState 让 React 认为它是合法的

希望它会帮助某人。

【讨论】：