javascript - onSubmit 没有执行异步函数

Question

我正在尝试提交一个在按下获取 gif 按钮时生成 gif 的函数。

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

1) 我希望客户输入一个值

2) 把值设置成这样

例如

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

3) 获取值并像下面这样返回

当前项目

https://stackblitz.com/edit/react-4mzteg?file=index.js

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Card from './Card';
import { throws } from 'assert';

class App extends Component {

  constructor(props){
    super(props);

    this.state = {
      query: '',
      slug:undefined,
      url:undefined
    }

    this.onChange = this.onChange.bind(this);

  }

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



  getGIY = async (e) =>{

    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);
    }



  }


  render() {
    return(
      <div>
        <h1> Welcome</h1>

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

                </form>

        <Card slug={this.state.slug} url={this.state.url}/>
      </div>
    );

  }

}

export default App;

Card.js

import React, {Component} from 'react';

const Styles = {
    width: '300px',
    height: '300px'
}

class Card extends React.Component {

    render() {

        return (

            <div>
                <h1>{this.props.slug}</h1>

                <div>
                    <img src={this.props.url}/>
                </div>

            </div>

        );

    }

}

export default Card;

Answer 1

你错过了 2 3 4 件事

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

2) 当您使用表单时，您需要防止默认使用

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

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

4) 而不是 const query = this.state._query 你需要使用 const query = this.state.query your state name is query

  onChange(e){

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

Demo

你的 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>