时间戳

首页 > 解决方案 > 反应在其他文件中使用声明的 const

html - 反应在其他文件中使用声明的 const

问题描述

我试图四处寻找解决方案，但找不到任何有用的东西。

我希望能够从 api 获取详细信息并将其信息传递到另一个页面。该名称当前定义为“drink.strDrink”，图像也是如此。

但是我想在获取日期后在另一个文档中获取日期，这就是我所拥有的。

// Here I get the data from the API    
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)
    })
  }

// Here I use the data from the API    
<Fragment key={index} >
                <Card.Img variant="top" src={drink.strDrinkThumb} />
                  <Card.Body>
                    <Card.Title>{drink.strDrink}</Card.Title>
                    <Card.Text style={{overflow: 'hidden', whiteSpace: 'pre'}}>
                      <p>{drink.strCategory}</p>
                    </Card.Text>
                    <Router>
                    <Button variant="primary"><Link to={"/drink#"+drink.strDrink.replace(/\s+/g, '-')}>More info</Link></Button>
                    </Router>
                  </Card.Body>
              </Fragment>

标签： htmlarraysreactjsapi

解决方案

你可以使用像 redux 这样的状态管理工具或者 context api：

https://react-redux.js.org/

https://reactjs.org/docs/context.html

或者您可以提升状态并将状态作为道具传递：

https://reactjs.org/docs/lifting-state-up.html

推荐阅读