Javascript 未捕获的TypeError:_this.props.ontogle不是函数

我的代码从第三方API提取数据并将其放入数组中。然后它显示为

组件列表。我希望能够单击该项目并将其添加到

_this.props.ontogle不是一个函数

。。。是我犯的错误

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;

var Search=React.createClass({
getInitialState:函数（）{
返回{
孤岛加载：false，
选择列表：[]，
数据：[]
}
},
handleToggle:函数（id）{
log（'toggled！'）；
},
handleAddChosen:函数（名称）{
这是我的国家({
选择名单：[
…this.state.chosenList，
{
id:uuid（），
姓名:姓名,，
}
]
});
},
handleSearch:函数（名称）{
var=这个；
这是我的国家({
孤岛加载：正确
});
var-dataL=[]；
SearchAPI.getSearch（名称）.then（函数（searchL）{
那是一个州({
姓名:姓名,，
dataL:searchL，
孤岛加载：false，
chosenList:chosenList
});
},
函数（错误消息）{
警报（错误消息）；
setState（{isLoading:false}）；
});
},
渲染：函数（）{
var{isLoading，name，dataL，results}=this.state；
函数renderMessage（）{
如果（孤岛加载）{
返回搜索。。。；
}否则，如果（姓名）{
返回；
}
}
返回(
{renderMessage（）}
挑选出来的
);
}
});
module.exports=搜索；

我的搜索API（SearchAPI.jsx）

module.exports={
getSearch:函数（名称）{
var requestUrl=`${URL}:${name}`；
var-dataL=[]；
var searchL=[]；
返回axios.get（requestUrl）.then（函数（res）{
dataL=[res.data.data]；
//console.log（'FROMapiPage-dataL:'+dataL[0]）；
对于（var i=0，len=dataL[0]。长度；i{
返回chosenList.map（（已选择）=>{
返回(
);
});
};
返回(
{renderchosen（）}
);
}
});
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;

var React=require（'React'）；
从“物料界面/卡片”导入{Card、CardActions、CardHeader、CardMedia、CardTitle、CardText}；
//TODO为映射添加uuid
var Result=React.createClass({
render:function（）{
var{id，name}=this.props；
返回(
{
this.props.onToggle（id）
}}>
{name}
);
}
});
module.exports=结果；

---

是否有人能够帮助您解决此错误？

您正在将onToggle的处理程序传递给ChosenList，但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>
    );
  }
});

var ChosenList=React.createClass({
handleAddChosen:函数（）{
},
render:function（）{
var{chosenList，onToggle}=this.props；
var rendercosen=（）=>{
返回chosenList.map（（已选择）=>{
返回(
);
});
};
返回(
{renderchosen（）}
);
}
});

很明显，

ChosenList

组件是此错误的根源，而且更重要的是，即使您传递了

this.handleAddChosen

作为该组件的

onToggle

属性的值，在任何地方都没有声明

handleAddChosen

。你通过了未定义的

，
，当然，未定义不是一个函数。我在上面抄写代码时犯了一个错误。HandLeadChosen是正确的函数名，而不是HandLeadResult。我没有看到
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>
    );
  }
});