Question

大家早上好。我正在制作一个食谱应用程序。我已经按照我想要的方式设置了所有内容，我可以在我的表单中手动搜索食谱，并获取并显示我想要的结果。

我已经设置为用户可以使用来自 Material ui 的模式和切换按钮选择美食、饮食、过敏或课程。一旦用户使用 switch 组件选择数据，我就可以获得我想要在表单中显示的数据。

我遇到的问题是，当我单击搜索按钮时，它不会搜索，除非我以实际形式执行某些操作。我知道这是来自我的 onChange 处理程序。如果我只是在输入上按空格键，它将进行搜索，但是直到我在输入中实际执行某些操作之前，它才不会……即使我的 Switch 按钮中的文本显示在输入中。我希望这是有道理的。这是我正在为这个组件使用的代码。

import React, { useContext, useState } from "react";
import Axios from "axios";
import { v4 as uuidv4 } from "uuid";
import "./index.css";
import Recipe from "./Recipe";
import Alert from "./Alert";
import { Button, Grid, makeStyles } from "@material-ui/core";
import ContentContext from "../ContentContext";

const searchStyles = makeStyles(() => ({
  search: {
    backgroundColor: "lightGrey",
    height: "50px",
    width: "100px",
    "&:hover": {
      color: "#fff",
    },
  },
}));

function Search() {
  const [query, setQuery] = useState("");
  const [recipes, setRecipes] = useState([]);
  const [alert, setAlert] = useState("");

  const { data, setData } = useContext(ContentContext)

  const cuisine = data.cuisine

  const APP_ID = "###";
  const APP_KEY = "###";

  const url = `https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=30`;

  const getData = async () => {
    if (query !== "" || data !== "") {
      const result = await Axios.get(url);
      if (!result.data.more) {
        return setAlert("No food with such name");
      }
      console.log(result);
      setRecipes(result.data.hits);
      setQuery("");
      setAlert("");
    } else {
      setAlert("Oops! you forget to enter a search word");
    }
  };

  const onChange = (e) => {
    setQuery(e.target.value);
    setData(e.target.value)
  
  } ;

  const onSubmit = (e) => {
    e.preventDefault();
    getData();
  };

  const classes = searchStyles();

  return (
    <div className="Search">
      <form onSubmit={onSubmit} className="search-form">
        {alert !== "" && <Alert alert={alert} />}
        <input
          type="text"
          name="query"
          onChange={onChange}
          value={query || cuisine}
          autoComplete="on"
          placeholder="Search Food"
        />
        <Button onClick = {onSubmit} className={classes.search}>Search</Button>
      </form>
      <div className="recipes">
        {recipes !== [] &&
          recipes.map((recipe) =>
          

          <Recipe key={uuidv4()} recipe={recipe} />
          )}
      </div>
    </div>
  );
}

export default Search;

我不打算存储 API 密钥和 ID 等重要信息，我只是还没有将它们放入 .env 文件中。

我很确定我的逻辑在我的 onChange 处理程序上崩溃了。有人对我应该从这里去哪里有任何建议吗？

如何使用来自我的 useContext 钩子的数据搜索 API

0 个答案: