Question

我是这里的初学者，我正在从udemy处进行一些反应，尽管一切工作正常且良好，我的老师对我的所有文件进行了仔细检查，但此时它抛出了错误，我无法确定。

引发错误，如下所示。

 6 |    const transformedIngredients = Object.keys(props.ingredients)
   7 |    .map(igKey => {
   8 |        return [...Array(props.ingredients[igKey])].map((_, i) => {
>  9 |           return <BurgerIngredient key={igKey + i} type={igKey} />;
     |                 ^  
  11 |        });
  12 |    });

burger.js

import React from 'react';
import classes from './Burger.css';
import BurgerIngredient from './BurgerIngredient/BurgerIngredient';

const burger = (props) => {
    const transformedIngredients = Object.keys(props.ingredients)
    .map(igKey => {
        return [...Array(props.ingredients[igKey])].map((_, i) => {
           return <BurgerIngredient key={igKey + i} type={igKey} />;

        });
    });
    return (
    <div className ={classes.Burger}>
        <BurgerIngredient type="bread-top" />
       {transformedIngredients}
        <BurgerIngredient type="bread-bottom" />
    </div>
    );
};

export default burger;

代码与讲师相同，但抛出错误。

另外两个文件粘贴在下面

burgerbuilder.js

import React, { Component } from 'react';
import Auxy from '../../Hoc/Auxy'; 
import Burger from '../../components/Burger/Burger';

class BurgerBuilder extends Component {

    state = {
        ingredients: {
            salad: 1,
            bacon: 1,
            meat: 1,
            cheese: 2

        }
    }
    render() {
        return ( 
            <Auxy>
                 <Burger />
                <div>Build Controls </div>

            </Auxy>
        );
    }
}
export default BurgerBuilder;

burgeringredient.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classes from './BurgerIngredient.css';

class BurgerIngredient extends Component {
    render () {

        let ingredient = null;
        switch (this.props.type){
        case ('bread-bottom'):
        ingredient = <div className={classes.BreadBottom}></div>;
        break;
        case ('bread-top'):
        ingredient = (
            <div className={classes.BreadTop}>
            <div className={classes.Seeds1}></div>
            <div className={classes.Seeds2}></div>
            </div>
        );
        break;
        case ('meat'):
        ingredient =<div className={classes.Meat}></div>;
        break;
        case ('cheese'):
        ingredient =<div className={classes.Cheese}></div>;
        break;
        case ('bacon'):
        ingredient =<div className={classes.Bacon}></div>;
        break;
        case ('salad'):
        ingredient =<div className={classes.Salad}></div>;
        break;
        default:
        ingredient =null;
    }
    return ingredient;

    }
} 

BurgerIngredient.propTypes={
    type: PropTypes.string.isRequired
};

export default BurgerIngredient;

Answer 1

有同样的问题！

在burgerbuilder.js中，确保将传递的成分返回到burger组件中：

             <Burger ingredients={this.state.ingredients} />

Answer 2

对于遇到此错误的人，还要检查您是否在BurgerIngredients.js中而不是BurgerBuilder.js中声明了状态

稍后谢谢。

TypeError：无法将未定义或null转换为对象

2 个答案: