axios 将项目从API获取到react中的列表

oewdyzsn 于 2022-11-05 发布在 iOS

关注(0)|答案(2)|浏览(128)

我在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>
  )}

axios

来源：https://stackoverflow.com/questions/68772205/get-items-from-api-into-list-in-react

2条答案

按热度按时间

kuuvgm7e1#

只需运行一个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>
)}

赞(0）回复(0）举报 2022-11-05

nfzehxib2#

您应该Map您的列表：

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>

赞(0）回复(0）举报 2022-11-05

我来回答

axios 将项目从API获取到react中的列表

2条答案

相关问题

热门标签

最新问答