Question

我的代码从第三方API中提取数据并将其放入数组中。然后它显示为wolfExample.eat(vegFood);组件的列表。我希望能够点击该项目并将其添加到<Result />

_this.props.onToggle不是函数

...是我得到的错误。

<ChosenList />

我的搜索API（SearchAPI.jsx）

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;

Result.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;

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

Answer 1

您正在将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>
    );
  }
});

未捕获的TypeError：_this.props.onToggle不是函数

1 个答案: