reactjs - 延迟 onClick 响应 React App(适用于第二次点击但不是第一次)
问题描述
所以,我有一个 onClick 附加到一个我想调用 tenDrinks 函数的按钮。第一次单击时,我返回一个空数组。在第二次点击时,我从我的 axios 调用中收到了我想要的东西。有没有人有明确的理由解释为什么?并解释我可能需要做些什么来解决这个问题?
可以在底部找到带有控制台日志的页面图片以进行可视化。
import axios from 'axios';
const Home = () => {
const [randomDrinks, setRandomDrinks] = useState([]);
const tenDrinks = async () => {
const config = {
method: 'GET',
url: 'https://the-cocktail-db.p.rapidapi.com/randomselection.php',
headers: {
'content-type': 'application/octet-stream',
'x-rapidapi-host': 'the-cocktail-db.p.rapidapi.com',
'x-rapidapi-key': 'ff61de8c3fmshdbbdcfd2003501ep1d77b7jsn0bc9bc4a1b9b',
useQueryString: true,
},
};
await axios(config)
.then((res) => setRandomDrinks(res.data.drinks))
.then((res) => console.log(randomDrinks))
// .then((random) => console.log(randomDrinks))
.catch(console.error);
const eachDrink = randomDrinks.map((drink) => (
<div key={drink.idDrink}>{drink.strDrink}</div>
));
console.log(randomDrinks[0]);
return (
<div className='randomDrink'>
<h3>{eachDrink}</h3>
</div>
);
};
// tenDrinks();
const onClick = () => {
tenDrinks();
};
return (
<div>
<button onClick={onClick}>Get 10 random cocktails</button>
{/* <RandomDrinks /> */}
</div>
);
};
export default Home;
```[enter image description here][1]
[1]: https://i.stack.imgur.com/Y2ZJ3.png
解决方案
您不需要从 tenDrinks 函数返回值,因为您正在设置返回 api 数据的状态。
只需在渲染中获取 randomDrinks 的值,每次状态更改都会像这样更新
{ randomDrinks.map((drink) => (
<div key={drink.idDrink}>{drink.strDrink}</div>
))
}
您的完整代码看起来像这样
const Home = () => {
const [randomDrinks, setRandomDrinks] = useState([]);
const tenDrinks = async () => {
const config = {
...
} ;
await axios(config)
.then((res) => setRandomDrinks(res.data.drinks)) // This updates the value of randomDrinks
.catch(console.error);
};
const onClick = () => {
tenDrinks();
};
return (
<div>
<button onClick={onClick}>Get 10 random cocktails</button>
{/** This will always rendered the current state value of randomDrinks */}
{ randomDrinks.map((drink) => (
<div key={drink.idDrink}>{drink.strDrink}</div>
)) }
</div>
);
};
推荐阅读
- python - 将我自己的 jupyter 笔记本(具有特定依赖项)与 docker 一起使用?
- python - 检查数据框列中的值是否存在于列表中,并根据检查结果创建新列
- testing - 升级intellij后无法运行testNG.xml
- jquery - jquery ajax上传的croppie图片不在提交的请求中
- c# - 详细视图asp.net mvc5中的外部值为空
- excel - 当我在不同位置打开 excel 文件时出现运行时错误“91” - VBA
- python - 在 Python 中过滤数据框以获取指定列中的 TRUE/FALSE 值
- python - 雅虎财经 API 是否开放?
- javascript - 如何排除 karma 中选定组件的 customHeaders?
- sql - 在 Teradata 中将字符串转换为日期的问题