代码之家 › 专栏 › 技术社区 › BARNOWL

OnSubmit未执行异步函数

reactjs javascript

BARNOWL · 技术社区 · 6 年前

我正在尝试提交一个函数,当按下GET 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;

J.J.

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;

2 回复 | 直到 5 年前

Just code 5 年前

你失踪了二三 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._query 你需要使用 const query = this.state.query 您的州名是查询

  onChange(e){

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

Demo

你的快速功能

  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>

Drew Reese 5 年前

混合承诺和try/catch块有点混乱,因为承诺本身复制了try/catch块的许多行为。承诺也是可以连锁的。我建议您对Getgiy函数进行编辑。它和现有的Try/Catch w/Unchained Promises一样可读,但更惯用(例如,如果成功了,那么下一步做),更重要的是它更简洁。

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
}