reactjs - react hooks回调函数需要点击两次
问题描述
我有一个追随者JSX
,它的行为方式很奇怪。我需要点击按钮两次来更新setRows
钩子。
const [rows, setRows] = useState([]);
const [fileName, setfileName] = useState('test.txt');
const handleFilenameClick = (e) => {
e.preventDefault();
setfileName(e.target.value);
async function anyNameFunction() {
const response = await axios.get(`/api/files/fileData/${fileName}`);
setRows(response.data);
}
anyNameFunction();
};
<div className="list-group list-group-flush">
{fileNames.map((file) => {
return <input type="button" className="bg-light" onClick={handleFilenameClick} value={file}></input>
})}
</div>
我的问题是,当我单击按钮时,它应该设置
setRows
并更新我的网格。目前我需要点击两次才能工作。我无法弄清楚确切的问题。
解决方案
const handleFilenameClick = (e) => {
e.preventDefault();
setfileName(e.target.value);
async function anyNameFunction() {
// use `e.target.value` directly because `setfileName` is async.
// so every time when you use it, you will always get it's previous value
const response = await axios.get(`/api/files/fileData/${e.target.value}`);
setRows(response.data);
}
anyNameFunction();
};
推荐阅读
- swift - 无法获得必要的日期
- sql - 有没有办法按类型主要类型对应用程序名称进行分组(例如 Google Chrome = Google Chrome Ver 11)
- c# - 设置列表的最佳实践
为空 - asp.net-core - 如何使用 Miniprofiler 存储来支持多个 Web 实例?
- eclipse - EGit 未暂存的文件不会消失
- r - 无法与 SQL Server 2017 中的“R”脚本的运行时通信
- python - 从长表结构创建数组
- regex - 在给定模式的情况下,如何选择第一个引号 ("),不考虑内容之间的内容,然后选择第二个引号 (")?
- json - 使用 Express 将 JSON 对象显示为字符串
- javascript - Javascript使用parseint从类名中获取id号