无法读取未定义的属性（读取“肉”）

Question

我做了一个汉堡程序，我的目标是用两个按钮添加和删除汉堡配料 但是添加成分后，如果再次单击该按钮，则会出现以下错误： Uncaught TypeError: Cannot read properties of undefined (reading 'meat') at Object.addIngredientsHandler [作为 addIngredients]

import { useState } from "react";
import Burger from "./Burger/Burger";
import BurgerControls from "./BurgerControls/BurgerControls";
import BootstrapNavbar from "../ReactBootsrap/BootstrapNavbar";
export default function BurgerBuilder() {
  const [state, setState] = useState({
    ingredients: {
      meat: 1,
      salad: 1,
      cheese: 1,
      bacon: 1,
    },
    totalPrice: 0,
    INGREDIENT_PRICES: {
      salad: 0.25,
      cheese: 0.5,
      meat: 5,
      bacon: 1,
    },
  });
  const addIngredientsHandler = (type) => {
    const oldCount = state.ingredients[type];
    const updatedCount = oldCount + 1;
    const updatedIngredients = {
      ...state.ingredients,
    };
    updatedIngredients[type] = updatedCount;
    const showPrice = state.INGREDIENT_PRICES[type];
    const oldPrice = state.totalPrice;
    const newPrice = oldPrice + showPrice;
    setState({ ingredients: updatedIngredients, totalPrice: newPrice });
  };

  const removeIngredientsHandler = (type) => {
    const oldCount = state.ingredients[type];

    const updatedCount = oldCount - 1;
    const updatedIngredients = {
      ...state.ingredients,
    };
    updatedIngredients[type] = updatedCount;
    const showPrice = state.INGREDIENT_PRICES[type];
    const oldPrice = state.totalPrice;
    const newPrice = oldPrice - showPrice;
    setState({ ingredients: updatedIngredients, totalPrice: newPrice });
  };

  return (
    <>
      <BootstrapNavbar />
      <Burger ingredients={state.ingredients} />
      <BurgerControls
        addIngredients={addIngredientsHandler}
        removeIngredients={removeIngredientsHandler}
        totalprice={state.totalPrice}
      />
    </>
  );
}

import React from "react";
import styles from "./BurgerControls.module.css";
import BurgerControl from "./BurgerControl/BurgerControl";

const controls = [
  { label: "Meat", type: "meat" },
  { label: "Salad", type: "salad" },
  { label: "Bacon", type: "bacon" },
  { label: "Cheese", type: "cheese" },
];

const BurgerControls = (props) => (
  <div className={styles.BuildControls}>
    <p>
      {" "}
      <strong>purchasable:</strong>
    </p>
    <p>{props.totalprice.toFixed(2)}$</p>
    {controls.map((ctrl) => (
      <BurgerControl
        key={ctrl.label}
        label={ctrl.label}
        add={() => props.addIngredients(ctrl.type)}
        remove={() => props.removeIngredients(ctrl.type)}
      />
    ))}
    <button className={styles.OrderButton}>Order</button>
  </div>
);

export default BurgerControls;

github 存储库

Answer 1

错误指向这里：

const showPrice = state.INGREDIENT_PRICES[type];

这意味着

type

是

'meat'

和

state.INGREDIENT_PRICES

是

undefined

。虽然它是在 initial 状态值中定义的，但只要您像这样更新状态，它就会被放弃：

setState({ ingredients: updatedIngredients, totalPrice: newPrice })

部分状态更新是旧 React 版本和基于类的组件的产物。

useState

钩子不会那样做。相反，要保留您未修改的属性，您还需要将它们包含在状态更新中：

setState({
  ...state,
  ingredients: updatedIngredients,
  totalPrice: newPrice
})