将 api 中的项目放入 react 列表中答案

【问题标题】：get items from api into list in react将 api 中的项目放入 react 列表中
【发布时间】：2021-10-16 16:44:13
【问题描述】：

我正在使用 React，但我的 api 中的数据遇到了问题。我需要记录日期并打印所有搜索结果，但我不能。现在数组的索引设置为 [0]，这允许我打印 1 个产品的所需详细信息。有什么想法可以打印所有结果吗？

  const [drink, setDrink] = useState([])
  const [drinkCat, setDrinkCat] = useState([])
  const [drinkImg, setDrinkImg] = useState([])
  const [drinkList, setDrinkList] = useState([])
  const [id, setId] = useState()
    const [idFromButtonClick, setIdFromButtonClick] = useState(1)
  const [active, setActive] = useState("inactive")

  const getDrink = () => {
    Axios.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${id}`).then((res)=> {
      console.log(res)
      setDrinkList(res.data.drinks.length)
      setDrink(res.data.drinks[0].strDrink)
      setDrinkCat(res.data.drinks[0].strCategory)
      setDrinkImg(res.data.drinks[0].strDrinkThumb)
    })
  }

    const handleClick = () => {
        setIdFromButtonClick(id)
    }

    return (
    <body>
    <div>
        <h1>

        </h1>

        <ul className="test">
        <input id="searchBar" type="text" value={id} placeholder="Søg efter drink"  onChange={e => setId(e.target.value)}></input>
        <button onClick={handleClick, getDrink}>Søg????</button>
          <li>
          <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={drinkImg} />
            <Card.Body>
              <Card.Title>{drink}</Card.Title>
              <Card.Text>
                <p>{drinkCat}</p>
              </Card.Text>
            </Card.Body>
          </Card>
          </li>
        </ul>
    </div>
    </body>
)}

【问题讨论】：

标签： html reactjs list api axios

【解决方案1】：

只需运行map。

const [drink, setDrink] = useState([])
  const [drinkCat, setDrinkCat] = useState([])
  const [drinkImg, setDrinkImg] = useState([])
  const [drinkList, setDrinkList] = useState([])
  const [id, setId] = useState()
    const [idFromButtonClick, setIdFromButtonClick] = useState(1)
  const [active, setActive] = useState("inactive")

  const getDrink = () => {
    Axios.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${id}`).then((res)=> {
      console.log(res)
      if(res && res.data && res.data.drinks) {
        setDrinkList(res.data.drinks);
      }
    })
  }

    const handleClick = () => {
        setIdFromButtonClick(id)
    }

    return (
    <body>
    <div>
        <h1>

        </h1>

        <ul className="test">
        <input id="searchBar" type="text" value={id} placeholder="Søg efter drink"  onChange={e => setId(e.target.value)}></input>
        <button onClick={handleClick, getDrink}>Søg?</button>
          {
            drinkList.map((drnk, index)=> {
                return   <li key={index}>
                <Card style={{ width: '18rem' }}>
                  <Card.Img variant="top" src={drnk.strDrinkThumb} />
                  <Card.Body>
                    <Card.Title>{drnk.strDrink}</Card.Title>
                    <Card.Text>
                      <p>{drnk.strCategory}</p>
                    </Card.Text>
                  </Card.Body>
                </Card>
                </li>
            })

          }
        </ul>
    </div>
    </body>
)}

【讨论】：

【解决方案2】：

你应该映射你的列表：

import { Fragment } from 'react';

...

setDrinkList(res.data.drinks);

...

<Card style={{ width: '18rem' }}>
  {drinkList.map((drink, index) => {
    return (
      <Fragment key={index}>
        <Card.Img variant="top" src={drink.strDrinkThumb} />
        <Card.Body>
          <Card.Title>{drink.strDrink}</Card.Title>
          <Card.Text>
            <p>{drink.strCategory}</p>
          </Card.Text>
        </Card.Body>
      </Fragment>
    )
  })}
</Card>

【讨论】：