未知の型エラー：_this.props.onToggleは関数ではありません

Question

私のコードはサードパーティのAPIからデータを取り出し、それを配列に格納します。その後、<Result />コンポーネントのリストとして表示されます。 Idは項目をクリックできるようにしたいと、それは<ChosenList />

_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; 

このエラーを把握助けることができる誰か？

Answer 1

onToggleのハンドラをChosenListに渡していますが、ChosenListは、呼び出すしようとしているResultの子にChosenListを渡すことはありません。あなたは

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> 
    ); 
    } 
});