陣營JS - 遺漏的類型錯誤：無法讀取的不確定

Question

財產我有一個問題（ 有我的組件：

class Main extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      total: 0 
     }; 
     this.totalFuns = this.totalFuns.bind(this); 
    } 

    totalFuns(event){ 

     this.setState({total: event}) 
    } 

    render() { 

     return (
      <main> 
       <Item data_items={data} data_cnt={this.totalFuns} /> 
      </main> 
     ); 
    } 
} 

export default Main; 

然後產品成分：

class Item extends Component { 
    constructor(props){ 
     super(props); 
     this.skuChange = this.skuChange.bind(this); 
    } 

    skuChange(event) { 

     this.props.data_cnt(event) 

    } 

    render() { 

     return (
      <section className="item" data-index={this.props.data_index}> 
       <Select values={this.props.data_items} onChange={this.skuChange}/> 
      </section> 
     ); 
    } 
} 

export default Item; 

然後選擇組件

class Select extends Component { 

    constructor(props) { 
     super(props); 
     this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
     this.props.onChange(event.target.value); 
     this.setState({value: event.target.label}); 
    } 

    render() { 

     var options = this.props.values; 

     var options_list = options.map(function(obj,i){ 

      return (
       <option value={i} key={i} label={obj.label} /> 
      ) 
     }); 

     return (
      <select value={this.state.value} onChange={this.handleChange}> 
       {options_list} 
      </select> 

     ); 
    } 
} 

export default Select; 

在控制檯顯示：Uncaught TypeError：無法讀取未定義屬性'totalFuns' 。 ？如果沒有這個有趣的我的應用程序工作正確。（

爲什麼

Answer 1

你的函數實際上是調用totalFuns但你必須totalFun

所以這行：

<Item data_items={data} data_cnt={this.totalFun} />

應

<Item data_items={data} data_cnt={this.totalFuns} />

Answer 2

在您的Select組件中，狀態value最初未定義，因此您收到錯誤。此外，可以根據值而不是標籤來選擇選項。請參閱下面的工作片段。此外，我不看數據存在於Main組件

class Main extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      total: 0 
 
     }; 
 
     this.totalFuns = this.totalFuns.bind(this); 
 
    } 
 

 
    totalFuns(event){ 
 
     console.log(event); 
 
     this.setState({total: event}) 
 
    } 
 

 
    render() { 
 
     var data = [{label: 1}, {label: 2}] 
 
     return (
 
      <main> 
 
       <Item data_items={data} data_cnt={this.totalFuns} /> 
 
      </main> 
 
     ); 
 
    } 
 
} 
 

 

 
class Item extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.skuChange = this.skuChange.bind(this); 
 
    } 
 

 
    skuChange(event) { 
 

 
     this.props.data_cnt(event) 
 

 
    } 
 

 
    render() { 
 

 
     return (
 
      <section className="item" data-index={this.props.data_index}> 
 
       <Select values={this.props.data_items} onChange={this.skuChange}/> 
 
      </section> 
 
     ); 
 
    } 
 
} 
 

 

 
class Select extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      value: '' 
 
     } 
 
     this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
     this.props.onChange(event.target.value); 
 
     this.setState({value: event.target.value}); 
 
    } 
 

 
    render() { 
 

 
     var options = this.props.values; 
 

 
     var options_list = options.map(function(obj,i){ 
 

 
      return (
 
       <option value={obj.label} key={i} label={obj.label} /> 
 
      ) 
 
     }); 
 

 
     return (
 
      <select value={this.state.value} onChange={this.handleChange}> 
 
       {options_list} 
 
      </select> 
 

 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Main/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="app"></div>