Reactjs代碼錯誤的不確定

我的代碼財產 'renderCat' 是：Reactjs代碼錯誤的不確定

import 'babel-polyfill'; 

import React from 'react'; 

import ReactDOM from "react-dom"; 


class SearchTree extends React.Component{ 

    constructor(props){ 

     super(props); 
     this.state = {searchString: ''}; 
    } 


    handleChange(e){ 

    this.setState({ 
      searchString: e.target.value.trim().toLowerCase(), 
      visible: !this.state.visible 
     }); 
    } 
    isMatch(e,searchString){ 

     return e.Name.toLowerCase().match(searchString) 
    } 
    nestingSerch(e,searchString){ 

     //recursive searching nesting 
     return this.isMatch(e,searchString) || (e.subcats.length && e.subcats.some(e=>this.nestingSerch(e,searchString))); 
    } 

    nestingSerch(e,searchString){ 
     //recursive searching nesting 
     return this.isMatch(e,searchString) || (e.subcats.length && e.subcats.some(e=>this.nestingSerch(e,searchString))); 
    } 
    renderCat(cat){ 
     //recursive rendering 
     return (
      <li key={cat.Id}> {cat.Name} 
       {(cat.subcats && cat.subcats.length) ? <ul>{cat.subcats.map(this.renderCat)}</ul>:""} 
      </li>); 
    } 

    render() { 

     let {items} = this.props; 
     let {searchString} = this.state; 

     if (searchString.length) { 
      items = items.filter(e=>this.nestingSerch(e,searchString)) 
      console.log(items); 
     }; 

     //nesting, adding to cattegories their subcatigories 
     items.forEach(e=>e.subcats=items.filter(el=>el.ParentId==e.Id)); 
     //filter root categories 
     items=items.filter(e=>e.ParentId==0); 

     //filter root categories 
     return (
      <div> 
       <input onChange={this.handleChange} placeholder="Type here" type="text" style={{"width" : "50%",borderColor: "#38c",height:"20"}} value={this.state.searchString}/> 
       <ul>{items.map(this.renderCat)}</ul> 
      </div> 
     ); 
    } 
} 

export default SearchTree;

這裏我得到-Cannot讀取屬性 'renderCat' 未定義error.Please的幫我

來源

2017-07-12 Raju

的可能的複製[類型錯誤：無法讀取的不確定結合的onClick當屬性<功能\ _name>（https：//開頭計算器。 com/questions/43568344/typeerror-can not-read-property-function-name-of-undefined-when-binding -inclic） –

的「map」函數應該得到一個以（item，index）或just（item）作爲參數的函數。例如： items.map（（curr）=> {return {curr.name}}）這個例子並不重要，它是遞歸的，因爲它返回的是嵌套的li-> ul元素，它們都在一個大的李元素。

來源

2017-07-12 07:36:43

我不明白你可以告訴我我的代碼有什麼問題。 – Raju

當然。 javascript array.map函數獲取一個函數作爲參數。你可以在這裏看到完整的解釋：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map 「map」函數迭代數組以執行一段代碼在每個項目上。在React情況下，它會根據您的意願渲染每個項目。 Map得到一個函數作爲參數，所以它應該看起來像這樣： cats.map（（currentItemInArray）=> {return this.renderCat（currentItem）} 因爲它迭代你的貓（?!）數組並執行renderCat在每件商品上。 –

這應該有助於

const { renderCat } = this;

，作爲回報，

<ul>{items.map((item) => { return renderCat(item) })}</ul>

來源

2017-07-12 07:53:33 Kejt

Reactjs代碼錯誤的不確定

回答

相關問題