Javascript onSubmit未执行异步函数

我正在尝试提交一个函数，当按下GETF按钮时，该函数将生成gif

但是，它不会在控制台中显示任何内容，页面将重新加载

1我希望客户端键入一个值

2将值设置为类似的值

前

http://api.giphy.com/v1/gifs/search?q=USER_VALUE&api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&limit=5

3获取值并返回，如下所示

当前项目

App.js

Card.js

你错过了2 3 4件事

1而不是this.props.getGIY您需要使用this.getGIY

2当您使用表单时，您需要使用

getGIY = async (e) =>{
   e.preventDefault();

3您需要获取e.target.value，而不是e.target.query

4而不是const query=this.state.\u query您需要使用const query=this.state.query您的州名是query

  onChange(e){

    this.setState({
      query: e.target.value
    })
  }

你的getGIY函数

  getGIY = async (e) =>{
   e.preventDefault();      
    try {
      const {slug, url} = this.state;
      const query = this.state._query 
      const response = await fetch(`http://api.giphy.com/v1/gifs/search?q=${query}&api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&limit=5`);
      const data = await response.json();
      const mainData = data.data;
      if(query){
        this.setState({
          slug: mainData[0].title,
          url: mainData[0].images.downsized.url
        });

        console.log(mainData);
      }

    } catch (error) {
      console.log(error);
    }



  }

你的表格

  <form onSubmit={this.getGIY}>
    <input type="text" name="query" onChange={this.onChange} ref={(input) => {this.state._query = input}} placeholder="Search GIF..."/>
                        <button>Get GIF</button>

  </form>

你错过了2 3 4件事

1而不是this.props.getGIY您需要使用this.getGIY

2当您使用表单时，您需要使用

getGIY = async (e) =>{
   e.preventDefault();

3您需要获取e.target.value，而不是e.target.query

4而不是const query=this.state.\u query您需要使用const query=this.state.query您的州名是query

  onChange(e){

    this.setState({
      query: e.target.value
    })
  }

你的getGIY函数

  getGIY = async (e) =>{
   e.preventDefault();      
    try {
      const {slug, url} = this.state;
      const query = this.state._query 
      const response = await fetch(`http://api.giphy.com/v1/gifs/search?q=${query}&api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&limit=5`);
      const data = await response.json();
      const mainData = data.data;
      if(query){
        this.setState({
          slug: mainData[0].title,
          url: mainData[0].images.downsized.url
        });

        console.log(mainData);
      }

    } catch (error) {
      console.log(error);
    }



  }

你的表格

  <form onSubmit={this.getGIY}>
    <input type="text" name="query" onChange={this.onChange} ref={(input) => {this.state._query = input}} placeholder="Search GIF..."/>
                        <button>Get GIF</button>

  </form>

---

混合承诺和try/catch块有点混乱，因为承诺本身复制了try/catch块的许多行为。承诺也是可以链接的。我建议对getGIY函数进行此编辑。它与现有的try/catch w/unchained promissions一样可读，但更为惯用，例如，如果这是成功的，那么下一步就这样做，更重要的是，它更为简洁

getGIY = async (e) =>{
  e.preventDefault();
  const { query } = this.state;

  /* fetch and response.json return promises */

  await fetch(`http://api.giphy.com/v1/gifs/search?q=${query}&api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&limit=5`)

  // fetch resolved with valid response
  .then(response => response.json())

  // response.json() resolved with valid JSON data
  // ({ data }) is object destructuring (i.e. data.data)
  .then(({ data }) => {
    this.setState({
      slug: data[0].title,
      url: data[0].images.downsized.url
    });
  })

  /* use catch block to catch any errors or rejected promises */
  .catch(console.log); // any errors sent to log
}

---

混合承诺和try/catch块有点混乱，因为承诺本身复制了try/catch块的许多行为。承诺也是可以链接的。我建议对getGIY函数进行此编辑。它与现有的try/catch w/unchained promissions一样可读，但更为惯用，例如，如果这是成功的，那么下一步就这样做，更重要的是，它更为简洁

getGIY = async (e) =>{
  e.preventDefault();
  const { query } = this.state;

  /* fetch and response.json return promises */

  await fetch(`http://api.giphy.com/v1/gifs/search?q=${query}&api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&limit=5`)

  // fetch resolved with valid response
  .then(response => response.json())

  // response.json() resolved with valid JSON data
  // ({ data }) is object destructuring (i.e. data.data)
  .then(({ data }) => {
    this.setState({
      slug: data[0].title,
      url: data[0].images.downsized.url
    });
  })

  /* use catch block to catch any errors or rejected promises */
  .catch(console.log); // any errors sent to log
}

---

添加e.preventDefault作为getGIYadd e.preventDefault作为getGIYthank的第一行这么多，我从你那里学到了一些东西。非常感谢你，我从你那里学到了一些东西。我很感激。