2016-11-23 192 views
2

我的代碼從第三方API中提取數據並將其放入數組中。然後它將顯示爲<Result />組件的列表。我還想能夠按一下該項目,並將它添加到<ChosenList />Uncaught TypeError:_this.props.onToggle不是函數

_this.props.onToggle is not a function

...是我得到的錯誤。

var Search = React.createClass({ 
    getInitialState: function() { 
    return { 
     isLoading:  false, 
     chosenList:  [], 
     dataL:   [] 

    } 
    }, 
    handleToggle: function(id) { 
    console.log('toggled!'); 
    }, 
    handleAddChosen: function (name) { 
    this.setState({ 
     chosenList: [ 
     ...this.state.chosenList, 
     { 
      id:  uuid(), 
      name: name, 
     } 
     ] 
    }); 
    }, 
    handleSearch: function(name) { 
    var that = this; 
    this.setState({ 
     isLoading: true 
    }); 
    var dataL = []; 

    SearchAPI.getSearch(name).then(function(searchL) { 

     that.setState({ 
     name: name, 
     dataL: searchL, 
     isLoading: false, 
     chosenList: chosenList 
     }); 
    }, 
    function(errorMessage) { 
     alert(errorMessage); 
     that.setState({isLoading: false}); 
    }); 
    }, 
    render: function() { 
    var {isLoading, name, dataL, results} = this.state; 
    function renderMessage() { 
     if(isLoading) { 
     return <h2>Searching...</h2>; 
     } else if (name) { 
     return <SearchResults name={name} dataL={dataL} />; 
     } 
    } 

    return (
     <div className="row col-md-12"> 
     <div className="col-md-8"> 
      <Card 
      style={{ 
       padding: '0' 
      }}> 
      <CardText 
       style={{ 
       textAlign:  "center", 
       width:   '100%', 
       margin:   '0 auto', 
       paddingTop:  '15px', 
       paddingBottom: '30px' 
       }}> 
       <SearchForm onSearch={this.handleSearch} /> 
      </CardText> 
      </Card> 
      <Card 
      style={{ 
       backgroundColor: '#eee' 
      }}> 
      {renderMessage()} 
      </Card> 
     </div> 
     <div className="col-md-4"> 
      <h2>Selected</h2> 
      <ChosenList chosenList={chosenList} onToggle={this.handleAddChosen} /> 
     </div> 
     </div> 
    ); 
    } 
}); 

module.exports = Search; 

我的搜索API(SearchAPI.jsx)

module.exports = { 
    getSearch: function(name) { 
    var requestUrl = `${URL}:${name}`; 
    var dataL = []; 
    var searchL = []; 
    return axios.get(requestUrl).then(function(res) { 
     dataL = [res.data.data]; 


     // console.log('FROMapiPage-dataL: ' + dataL[0]); 
     for (var i = 0, len = dataL[0].length; i < len; i++) { 
     searchL.push(<result id={uuid()} name={dataL[0][i].name} />); 
     } 
     return searchL; 
    }, 
    function(err) { 
     throw new Error(err.response.data); 
    }); 
    } 
} 



var ChosenList = React.createClass({ 
    handleAddChosen: function(){ 

    }, 
    render: function() { 
    var {chosenList} = this.props; 
    var renderChosen =() => { 
     return chosenList.map((chosen) => { 
     return (
      <Result key={chosen.id} {...chosen} /> 
     ); 
     }); 
    }; 
    return (
     <div> 
     {renderchosen()} 
     </div> 
    ); 
    } 
}); 

module.exports = chosenList; 

Result.jsx

var React = require('react'); 
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'; 

// TODO add uuid for mapping 

var Result = React.createClass({ 
    render: function() { 
    var {id, name} = this.props; 
    return (
     <div className="row" onClick={() =>{ 
      this.props.onToggle(id) 
     }}> 
     <Card 
      style={{ 
      padding: '15px', 
      margin: '5px' 
      }}> 
      <h2>{name}</h2> 
     </Card> 
     </div> 
    ); 
    } 
}); 

module.exports = Result; 

是任何人都能夠幫助弄清楚這個錯誤?

+0

很明顯'ChosenList'組件此錯誤的來源,並不止於此,即使你通過'this.handleAddChosen'作爲價值'onToggle'支撐對這個組件,在任何地方都沒有'handleAddChosen'聲明。你傳遞'undefined',當然undefined不是函數。 –

+0

我在編寫我的代碼時犯了一個錯誤。 handleAddChosen是正確的函數名稱,而不是handleAddResult。 – mGarsteck

+0

我沒有看到'ChosenList'的代碼 – rfornal

回答

0

您正在將onToggle的處理程序傳遞給您的ChosenList,但是您的ChosenList從未將它傳遞到它試圖調用它的Result子項上。你需要它傳遞下去的處理器...

var ChosenList = React.createClass({ 
    handleAddChosen: function(){ 

    }, 
    render: function() { 
    var {chosenList, onToggle} = this.props; 
    var renderChosen =() => { 
     return chosenList.map((chosen) => { 
     return (
      <Result key={chosen.id} {...chosen} onToggle={onToggle} /> 
     ); 
     }); 
    }; 
    return (
     <div> 
     {renderchosen()} 
     </div> 
    ); 
    } 
}); 
+0

不幸的是我仍然得到同樣的錯誤 – mGarsteck

相關問題