无法从API获取数据

Question

我正在尝试获取口袋妖怪类型的用户输入（例如：fire，water ...）以从PokeAPI获取数据。

当我在构造函数中调用我的performSearch函数时，它工作正常。但是，当我在我的表单的提交上调用它时，它仍然无法检索数据。在构造函数中工作的调用已被注释掉。 //this.performSearch（＆＃34;水＆＃34）

在我的提醒中，网址似乎很好，我不明白为什么它不起作用。有人可以帮忙吗？

＆＃13;

＆＃13;

import React, { Component } from 'react';
import './App.css';
import PokemonRow from './PokemonRow.js'
import $ from 'jquery';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      rows: [],
      value: ""
    };

    this.searchChangeHandler = this.searchChangeHandler.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    //this.performSearch = this.performSearch.bind(this);


    //this.performSearch("water")
  }

  performSearch(searchTerm) {
    var pokemonRows = [];
    const urlString = "http://pokeapi.salestock.net/api/v2/type/" + searchTerm + "/";
    alert(urlString);
    $.ajax({
      url: urlString,
      success: (searchResults) => {
        console.log("Fetched Data Succesfully");
        console.log(searchResults);

        const pokemonOfType = searchResults.pokemon;

        pokemonOfType.forEach(pokemon => {
          //console.log(pokemon.pokemon.name);
          const pokemonURL = pokemon.pokemon.url;
          $.ajax({
            url: pokemonURL,
            success: (pokemonFromArray) => {
              console.log(pokemonFromArray);
              let pokemonObject = <PokemonRow key={pokemonFromArray.id} pokemon={pokemonFromArray} />;
              //console.log(pokemonObject);
              pokemonRows.push(pokemonObject);
              console.log("pokemonRows.length: " + pokemonRows.length);
              this.setState({
                rows: pokemonRows
              })
              console.log("this.state.rows.length: " + this.state.rows.length);
            },
            error: (xhr, status, err) => {
              console.error("Failed to fetch individual pokemon data");
              alert("Failed to fetch individual pokemon data");
            }
          })

        })
      },
      error: (xhr, status, err) => {
        console.error("Failed to fetch data");
        alert("Failed to fetch data, urlString: " + urlString);
      }
    });
  }

  searchChangeHandler(event) {
    this.setState({value: event.target.value});
    //console.log(event.target.value);
  }

  handleSubmit(event) {
    alert('A pokemon type was submitted: ' + this.state.value);
    console.log(this.state.value);
    this.performSearch(this.state.value);
  }

  render() {
    return (
      <div className="App">
        <table className = "titleBar">
          <tb>
            <tr>
              <td>
                <img width="50" src="pokemon.png" alt="Pokemon logo"/>
              </td>
              <td>
                Pokemon Information
              </td>
            </tr>
          </tb>
        </table>

        <form onSubmit={this.handleSubmit}>
          <label>
            <input value={this.state.value} onChange={this.searchChangeHandler} className = "searchBar" placeholder="Enter Pokemon Type (EX. fire, water, electric...)" />
          </label>
           <input type="submit" value="Submit" />
        </form>


        {this.state.rows.map(function(row) {
          return row
        })}
      </div>
    );
  }
}

export default App;

＆＃13;

＆＃13;

＆＃13;