为什么父组件给值时“undefined”属性是未定义的,所以不能解构它?

问题描述 投票:0回答:2

我实际上正在使用 React 为 Odin 项目(一个免费的在线 Cursus 学习 Javascript)开发一个假购物车项目。我正在与 Vite、React-Router 和 Vitest 合作完成这个项目。我创建了一个以应用程序组件作为主页的路由器,它有一个子“Landing”,通过插座显示在应用程序中。我的应用程序组件基本上是一个 Header 组件和 Outlet (应该显示 Outlet )。我的 Header 组件采用 2 个 props、items 和 sum,在这个组件中我声明了带有假值的 defaultProps。

无论我如何尝试传递 Header 属性的值,它们都不起作用。父级( App )的值不起作用,声明内的默认值(不确定是否称为声明,所以 => ({items = 3, sum = 51 }) )不起作用,defaultProps 也不起作用。唯一有效的情况是当我删除总和时,奇怪的是,项目获得了正确的值。

在这里你可以找到我的仓库:https://github.com/Hachounet/shopping-cart

import { createBrowserRouter } from 'react-router-dom';
import App from '../App';
import Landing from '../components/Landing';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '/landing',
        element: <Landing />,
      },
    ],
  },
]);

export default router;

import './App.scss';
import Header from './components/Header';
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <>
      <Header
        items={3}
        sum={151}
      />
      <Outlet />
    </>
  );
}

export default App;

import styles from '../Header.module.scss';
import PropTypes from 'prop-types';

const Header = ({ items, sum }) => {
  console.log(items);
  return (
    <header className={styles.header}>
      <div className="noto-serif">L`Usine</div>
      <div>
        <button>Home</button>
        <button>Shop</button>
      </div>
      <div className={styles['cart-container']}>
        <p>{items} Items</p>
        <p>{sum} euros</p>
        <img
          src="src/assets/cart.svg"
          alt="Cart"
        ></img>
        <button>Go to checkout</button>
      </div>
    </header>
  );
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

Header.defaultProps = {
  items: 3,
  sum: 72.57,
};

export default Header;

reactjs react-props
2个回答
-1
投票

正如其他人所说,代码大部分看起来都是正确的。我可能要指出的一点是,您使用

Header.defaultProps
的方式可能会在您自己的环境中导致这种情况。由于 typescript 接管了整个 javascript 世界,
PropTypes
已经消亡了,所以我不确定这是否是合法的语法,但你可以直接在我知道正确的语法中内联做同样的事情替换:

const Header = ({ items, sum }) => {
...
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

Header.defaultProps = {
  items: 3,
  sum: 72.57,
};

与:

const Header = ({ items=3, sum=72.57 }) => {
...
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

除了那个可能错误,其他都正确。


-1
投票

我建议你使用这种方式来设置默认 props,因为现代 React 开发中 defaultProps 的使用减少了。

import styles from '../Header.module.scss';
import PropTypes from 'prop-types';

const Header = ({ items = 3, sum = 72.57 }) => {
  console.log(items);
  return (
    <header className={styles.header}>
      <div className="noto-serif">L`Usine</div>
      <div>
        <button>Home</button>
        <button>Shop</button>
      </div>
      <div className={styles['cart-container']}>
        <p>{items} Items</p>
        <p>{sum} euros</p>
        <img
          src="src/assets/cart.svg"
          alt="Cart"
        ></img>
        <button>Go to checkout</button>
      </div>
    </header>
  );
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

export default Header;

© www.soinside.com 2019 - 2024. All rights reserved.