我是 ReactJS 和 JS 的新手。
我有一个表,其中填充了来自 API 请求的数据。每行都有一个删除按钮,用于删除该特定条目。当您按下删除按钮时,会打开一个模态,要求您确认操作,如果您单击“是”,则 DELETE 请求将传递给 API,向 API 询问新的 GET 请求以检索新更新的元素列表,模态将关闭您应该会看到新的更新表。
或者至少,这就是应该发生的事情。
现在,当我确认删除操作时,Modal 关闭但表格没有更新,但是如果我刷新页面,表格会显示更新的内容而没有删除的条目,所以除了表格在确认后没有更新外,一切似乎都正常工作.
如果我按 F5 手动刷新页面,则此代码有效:
function TableCategory(prop, ref) {
const [info, setInfo] = useState([]);
useImperativeHandle(ref, () => {
return {
updateTable: () => {
fetchData();
},
};
});
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const response = await getCategoryList(UserService.getUserToken());
let newArr = [...response.data];
setInfo(newArr);
};
Run Code Online (Sandbox Code Playgroud)
现在,如果我尝试在延迟后再次“模拟刷新”运行 fetchData(),它会正常工作并且组件会在 Modal 关闭后更新,而无需手动刷新页面。我假设我没有像我应该的那样处理 ASYNC 行为。
此代码无需手动刷新即可工作:
useImperativeHandle(ref, () => {
return …Run Code Online (Sandbox Code Playgroud)