Как передать данные из React Form в Axios get request и отобразить результат запроса? - PullRequest
Новая
       54

Как передать данные из React Form в Axios get request и отобразить результат запроса?

0 голосов
/ 08 ноября 2019

Я пытаюсь получить ввод от пользователя и передать этот ввод в axios get, когда это будет сделано, результирующая информация передается в массив, который будет отображаться в виде карточек.

У меня естьпроблема, когда код ниже компилируется, но когда вводишь значения в поля формы и нажимаешь submit, ничего не происходит. В веб-консоли также ничего не отображается.

Где, примерно, я ошибаюсь? 

const initial_state = {
  location: "",
  cuisine: "",
  searchResults: []
};


class SearchMealForm extends Component {
  constructor(props) {
    super(props);
    this.state = { ...initial_state };
  }
  //handle user input and inject it into yelp api get request
  handleSubmit = event => {
    event.preventDefault();
    const { location, cuisine, searchResults} = this.state;
    this.props.onFormSubmit(this.state(location, cuisine, searchResults));
    axios.get(`https://api.yelp.com/v3/businesses/search?location=${location}+IE&categories=${cuisine}`)
    .then(response => this.setState({searchResults}))
  };

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

  //YELP http api get request
  searchYelpRestaurants = (location, cuisine, searchResults) => {
    axios
      .get(
        `https://api.yelp.com/v3/businesses/search?location=${location}+IE&categories=${cuisine}`,
        {
          headers: {
            Authorization: `Bearer ${process.env.REACT_APP_API_KEY_YELP}`
          }
        }
      )
      .then(res => this.setState({ searchResults: res.data.businesses }));
  };

  render() {
    const { location, cuisine } = this.state;

    //create cards with the results from the Yelp API GET
    const YelpSearchResults = this.state.searchResults.map(result => {
      return (
        <div className="ResultCard">
          <Card style={{ width: "18rem" }}>
            <Card.Img variant="top" src={result.image_url} />
            <Card.Body>
              <Card.Title>{result.name}</Card.Title>
            </Card.Body>
            <ListGroup className="list-group-flush">
              <ListGroupItem>{result.categories}</ListGroupItem>
              <ListGroupItem>{result.rating}</ListGroupItem>
            </ListGroup>
            <Button variant="primary">Book restaurant</Button>
          </Card>
        </div>
      );
    });
    // return YelpSearchResults;
    // }

    return (
      <React.Fragment>
        <div className="SearchMeal">
          <Form onSubmit={this.handleSubmit}>
            <Form.Row>
              <Form.Group as={Col}>
                <Form.Label>City</Form.Label>
                <Form.Control
                  name="location"
                  type="text"
                  value={location}
                  onChange={this.handleChange}
                  placeholder="location"
                />
              </Form.Group>
            </Form.Row>
            <Form.Row>
              <Form.Group as={Col}>
                <Form.Label>Cuisine</Form.Label>
                <Form.Control
                  name="cuisine"
                  type="text"
                  value={cuisine}
                  onChange={this.handleChange}
                  placeholder="cuisine"
                />
              </Form.Group>
            </Form.Row>
            <Button>Submit</Button>
            <Button>Clear</Button>
          </Form>
        </div>

        {YelpSearchResults}
      </React.Fragment>
    );
  }
}

export default SearchMealForm;

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

здесь Тип кнопки должен быть указан как submit 

        <Button type="submit">Submit</Button>

, чтобы форма работала!

0 голосов
/ 08 ноября 2019

Я бы реорганизовал ваш компонент, чтобы он работал 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import {
  Col,
  Form,
  Card,
  Button,
  ListGroup,
  ListGroupItem
} from "react-bootstrap";

const initial_state = {
  location: "",
  cuisine: "",
  searchResults: []
};

const SearchMealForm = ({ onFormSubmit = () => {} }) => {
  const [state, setState] = useState(initial_state);
  //handle user input and inject it into yelp api get request
  const handleSubmit = async event => {
    event.preventDefault();
    const { location, cuisine } = state;
    onFormSubmit(state);
    const searchResults = await searchYelpRestaurants({ location, cuisine });
    setState({ ...state, searchResults });
  };

  const handleChange = event => {
    setState({
      ...state,
      [event.target.name]: event.target.value
    });
  };

  //YELP http api get request
  const searchYelpRestaurants = async ({ location, cuisine }) => {
    try {
      const { data: { businesses: searchResults } = {} } = await axios.get(
        `https://api.yelp.com/v3/businesses/search?location=${location}+IE&categories=${cuisine}`,
        {
          headers: {
            Authorization: `Bearer dBMqyRFmBBg7DMZPK9v3rbGHmrLtlURpNUCJP6gbYHtyHTmboF-Mka-ZkHiDNq-G9ktATohJGD5iKQvelOHg3sDorBDiMgnsaa8SzTH8w6hjGQXlaIexDxFlTW3FXXYx`
          }
        }
      );
      return searchResults;
    } catch (err) {
      console.error(err);
    }
    return [];
  };

  const { location, cuisine, searchResults } = state;

  //create cards with the results from the Yelp API GET
  const YelpSearchResults = searchResults.map(result => (
    <div className="ResultCard">
      <Card style={{ width: "18rem" }}>
        <Card.Img variant="top" src={result.image_url} />
        <Card.Body>
          <Card.Title>{result.name}</Card.Title>
        </Card.Body>
        <ListGroup className="list-group-flush">
          <ListGroupItem>{result.categories}</ListGroupItem>
          <ListGroupItem>{result.rating}</ListGroupItem>
        </ListGroup>
        <Button variant="primary">Book restaurant</Button>
      </Card>
    </div>
  ));

  return (
    <React.Fragment>
      <div className="SearchMeal">
        <Form onSubmit={handleSubmit}>
          <Form.Row>
            <Form.Group as={Col}>
              <Form.Label>City</Form.Label>
              <Form.Control
                name="location"
                type="text"
                value={location}
                onChange={handleChange}
                placeholder="location"
              />
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col}>
              <Form.Label>Cuisine</Form.Label>
              <Form.Control
                name="cuisine"
                type="text"
                value={cuisine}
                onChange={handleChange}
                placeholder="cuisine"
              />
            </Form.Group>
          </Form.Row>
          <Button type="submit">Submit</Button>
          <Button>Clear</Button>
        </Form>
      </div>

      {YelpSearchResults}
    </React.Fragment>
  );
};

export default SearchMealForm;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...