我有一个反应的问题，这是让我疯了。

Question

我已经测试了api，它的工作和显示方式，我希望它，但问题是，当我试图添加一些简单的东西，如搜索栏，我发现，我正在努力。每当我在搜索栏中输入并提交时，console.log(poke)都会返回两个包含大量信息的对象，其中没有一个是文本框中的值。

class Card extends React.Component {

  constructor() {
    super();
    this.state = {
      loading: true,
      pokemon: null,
      inputBox: "",

    }

    this.componentDidMount = this.componentDidMount.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange({ target }) {
    console.log({target})
    this.setState({
      [target.name]: target.value
    });
  }

 async componentDidMount(poke) 
  {
    console.log(poke);
    const url = `https://pokeapi.co/api/v2/pokemon/${poke}`;
    const response = await fetch(url);
    const data = await response.json();
    this.setState( {pokemon : data, loading : false} )

  }


    render() {
      return (

        <article className="pokemonStats"
        style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)'
      }}>
        {this.state.loading || !this.state.pokemon  ?( 
        <>
        <input name="input" 
        id="first_name"
        type="textbox" 
        name="inputBox"
        placeholder="Enter pokemon here..."
        value={ this.state.inputBox }
        onChange={ this.handleChange }/>

        <button value="send" onClick={this.componentDidMount}>Search</button>

Answer 1

componentDidMount 是一个生命周期方法，在第一次挂载后自动运行。所以你不能调用 this.comopnentDidMount

async setData() 
  {
    const poke = this.state.inputBox
    const url = `https://pokeapi.co/api/v2/pokemon/${poke}`;
    const response = await fetch(url);
    const data = await response.json();
    this.setState( {pokemon : data, loading : false} )
  }

  <button value="send" onClick={this.setData}>Search</button>

Answer 2

componentDidMount是 生命周期法. 如果你是新手，可以尝试使用功能组件。钩子更容易理解，也更容易操作。你生成的URL也是错误的。你在URL字符串中传递点击事件，而URL字符串必须通过输入框状态来计算。

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Card />
    </div>
  );
}

class Card extends React.Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      pokemon: null,
      inputBox: ""
    };

    this.getPokemon = this.getPokemon.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange({ target }) {
    this.setState({
      [target.name]: target.value
    });
  }

  async getPokemon(e) {
    try {
      console.log(this.state.inputBox);
      const url = `https://pokeapi.co/api/v2/pokemon/${this.state.inputBox}`;
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
      this.setState({ pokemon: data });
    } catch (err) {
      console.log(err);
    } finally {
      this.setState({ loading: false });
    }
  }

  render() {
    return (
      <article
        className="pokemonStats"
        style={{
          position: "absolute",
          left: "50%",
          top: "50%",
          transform: "translate(-50%, -50%)"
        }}
      >
        {this.state.pokemon && (
          <span>{JSON.stringify(this.state.pokemon, null, 4)}</span>
        )}
        <input
          name="inputBox"
          id="first_name"
          type="textbox"
          placeholder="Enter pokemon here..."
          value={this.state.inputBox}
          onChange={this.handleChange}
        />

        <button value="send" onClick={this.getPokemon}>
          Search
        </button>
      </article>
    );
  }
}