我是 React JS 的新手，现在正在创建一个 React 应用，让用户输入产品，然后应用会在屏幕上列出产品，但我收到一条错误消息，我不明白问题出在哪里。但我在这行代码中收到错误“TypeError：undefined 没有属性”：

const ProduktLista = () => {
     return (
         <ul>
            {this.state.produkter.map (produkt => (
                <li key={this.state.produkt}>{this.state.produkt + ' - ' + this.state.antal + ' - ' + this.state.pris}</li>
             ))}

有人能解释一下吗？ 这是我的代码：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';


export default class Kvitton extends React.Component {
constructor (props) {
    super(props);
    this.state = { 
        produkter: [], 
        produkt: '',
        antal:"",
        pris: "",
        summa:""
        
      
    }
    this.eFormChange = this.eFormChange.bind(this);
    //this.eSumma = this.eSumma.bind(this);
    this.eSubmit  = this.eSubmit.bind(this);       
    console.log('constructor'); 
}

render() {
    console.log('Render'); 
    return (
        <div>
            <h3>Kvitto</h3>
           
            <form onSubmit={this.eSubmit} >
                <p>
                    <label htmlFor="produkt">Produkt: </label>
                    <input id="produkt" onChange={this.eFormChange} value={this.state.produkt} />

                </p>
                <p>
                    <label htmlFor="antal">Antal: </label>
                    <input id="antal" onChange={this.eFormChange} value={this.state.antal} />

                </p>
                <p>
                    <label htmlFor="pris">Pris: </label>
                    <input id="pris" name="pris" onChange={this.eFormChange} value={this.state.pris} />
                </p>
                <p>
                    <button className="btn btn-secondary btn-sm">Submit </button>
                </p>
                <p> <ProduktLista valutaItems={this.state.produkter} /> </p>
                <p>
                      <label htmlFor="produkt">Summa: </label> 
                      <span>   </span>
                </p>

                
                
            </form>
        </div>
    );
}

eFormChange (e) {
    var inputObj = {};
    inputObj[e.target.id] = e.target.value;                 
    this.setState( inputObj );
}

eSubmit(e) {
    e.preventDefault();
    alert('submit');
    if (this.state.produkt.length === 0 ) {
        return alert("You have not given a product");
    }
    if (this.state.antal.length === 0 || this.state.antal !==Number)  {
        return alert("Antal has to be a number");
    }
    e.preventDefault();
    if (this.state.pris.length === 0 || this.state.pris !==Number) {
        return alert("Price has to be a number");
    }
    const newProduct = { 
        produkt: this.state.produkt,
        antal: this.state.antal, 
        pris: this.state.pris,
        //summa: (this.state.antal) *  (this.state.pris)

    };
  
    this.setState(state => ({
      produkter: state.produkter.concat(newProduct),
      produkt: '',
      antal:'',
      pris: ''
      //summa:''
    }));

    /* eSumma (e) {
        let summa = e.antal * e.pris;
        return summa;
    }*/

    console.log("----------" + this.state.produkt);
}
} 

const ProduktLista = () => {
    return (
        <ul>
            {this.state.produkter.map (produkt => (
                <li key={this.state.produkt}>{this.state.produkt + ' - ' + this.state.antal + ' - ' + this.state.pris}</li>
            ))}
        </ul>
    );
}