在搜索 URL 中插入元素

Question

我有一个 API 调用 (https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value})，我想做的是根据该 e.target.value 查找多个元素。 我有以下设置：

import React, {useState} from 'react'
import { useGlobalContext } from './helpers/context'

export default function IngredientPage() {
  var {cocktails} = useGlobalContext()
  const {ingredients} = useGlobalContext()
  const [cocktailList, setCocktailList] = useState([])
  
  const handleSubmit = (e) => {
    console.log(e.target.value)
  }

  const handleDropdownChange = async (e) => {
    // const ingredientURL = fetch(`www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value}`)
    // const selectedIngredientData = ingredientURL.json()
    // console.log(selectedIngredientData)
    const response = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value}`)
    const data = await response.json()
    const {drinks} = data
    setCocktailList(drinks)
  }

  if(cocktails.length < 1) {
    return <h2 className="section-title">No cocktails available</h2>
  }
    return (
        <div>
          <div className="form-group">
          <label>Select Ingredients</label>
          <select className="form-control" onChange={handleDropdownChange}>
          {
            ingredients.map((item) => {
                return <option key={item.ingredient} value={item.ingredient}>{item.ingredient}</option>
            })
          }
          </select>
          <button onClick={handleSubmit} type="button" className="btn btn-primary">
             <i className="fas fa-search"></i>
          </button>
          </div>
          {
            cocktailList.map((cocktail) => {
              return (
                <div key={cocktail.idDrink} className="col-sm">
                  <div className="card" style={{width: "18rem",marginTop: "2rem"}}>
                  <img className="card-img-top" src={cocktail.strDrinkThumb} alt="name" />
                  <div className="card-body">
                   <h5 className="card-title">{cocktail.strDrink}</h5>
                  </div>
                  </div>
              </div>
              )
            })
          }
        </div>
    )
}

我想找到一种方法，以便我可以选择多个元素，或者当我按下按钮时，它会将元素添加到列表中并实现另一个搜索按钮。到目前为止，我只能基于一项进行搜索。有什么想法我该怎么做？

Answer 1

看起来API 采用逗号分隔的成分列表。

• 按成分搜索

  www.thecocktaildb.com/api/json/v1/1/filter.php?i=Gin
  www.thecocktaildb.com/api/json/v1/1/filter.php?i=Vodka
  

• 按多种成分过滤（仅适用于 $2+ Patreon 支持者）

  www.thecocktaildb.com/api/json/v1/1/filter.php?i=Dry_Vermouth,Gin,Anis
  

假设您具有正确的访问权限，您可以指定select 元素以使用multiple 属性选择多个选项。这将需要更新onChange 处理程序逻辑以迭代选定的选项。创建一个选定选项的数组，并将它们与 "," 连接起来作为 queryString 值。

const handleDropdownChange = async (e) => {
  const { options } = e.target;
  const selected = [];
  for (const option of options) {
    if (option.selected) selected.push(option.value);
  }

  try {
    const response = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${selected.join(",")}`);
    const { drinks } = await response.json();
    setCocktailList(drinks);
  } catch(error) {
    // handle any errors
  }
}

...

<select
  multiple
  className="form-control"
  onChange={handleDropdownChange}
>
  {ingredients.map((item) => (
    <option key={item.ingredient} value={item.ingredient}>
      {item.ingredient}
    </option>
  ))}
</select>