如何解决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();
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。