反应：错误：无法将未定义或 null 转换为 object

Question

I was trying to solve this error by myself with the help of previous posts but unsuccessful. I'm trying to take the "state.ingredients" property(I think), I'm talking about the "sugar" "coffee" "water" etc I'm getting this error:

TypeError: Cannot convert undefined or null to object This is the CoffeeBuilder.js the important part of the code:

const ingPrices = {
    sugar: 0,
    coffee: 0.2,
    water: 0,
    milk: 0.2,
};

class CoffeeBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ingredients: {
                sugar: 0,
                coffee: 0,
                water: 0,
                milk: 0,
            },
            totalPrice: 0,
            purchasing: false,
        };
    }

    addIngHandler = (type) => {
        const newCount = this.state.ingredients[type] + 1;
        console.log("clicked");
        const updatedIng = { ...this.state.ingredients };
        updatedIng[type] = newCount;

        const ING_PRICE = ingPrices[type];
        const oldPrice = this.state.totalPrice;
        this.setState({
            totalPrice: oldPrice + ING_PRICE,
            ingredients: newCount,
        });
    };

    render() {
        return (
            <div>
                <CoffeeSlider />
                <CoffeeControls addIng={this.addIngHandler} removeIng={this.removeIngHandler} />
                <OrderSummary ingredients={this.state.ingredients} price={this.state.totalPrice} />
            </div>
        );
    }
}

export default CoffeeBuilder;

This is the OrderSummary.js code:

import React from "react";
import "./OrderSummary.css";

const OrderSummary = (props) => {
    return Object.keys(props.ingredients).map((igKey) => {
        console.log(igKey);
        return (
            <div>
                <li key={igKey}>
                    <span style={{ textTransform: "capitalize" }}>{igKey}</span>:
                    {props.ingredients[igKey]}
                </li>
            </div>
        );
    });
};

export default OrderSummary;

the console.log fetches the data fine, but when I'm trying to return it in a span as a list, it goes wrong.

Answer 1

Please try CoffeBuilder component like this, your code has few issues such as state is not being declared in constructor, no render function.

Below is the codesandbox link:

https://codesandbox.io/s/frosty-mountain-235yk?file=/src/App.js

 class CoffeeBuilder extends Component { constructor(props) { super(props); this.state = { ingredients: { sugar: 0, coffee: 0, water: 0, milk: 0, }, totalPrice: 0, purchasing: false, } } render() { return ( < OrderSummary ingredients = { this.state.ingredients } />); } }