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

Question

我实际上正在使用 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;

Answer 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,
};

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

Answer 2

我建议你使用这种方式来设置默认 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;