时间戳

首页 > 解决方案 > 获取新数组后组件未更新

javascript - 获取新数组后组件未更新

问题描述

我是 ReactJS 和一般 JS 的新手。

我有一个表格，其中填充了来自 API 请求的数据。每行都有一个删除按钮，用于删除该特定条目。当您按下删除按钮时，会打开一个模态框，要求您确认操作，如果单击“是”，则 DELETE 请求将传递给 API，将向 API 请求一个新的 GET 请求以检索新更新的元素列表，模态框将关闭您应该会看到新的更新表。

或者至少，这就是应该发生的事情。

现在，当我确认删除操作时，模态关闭但表格没有更新，但是如果我刷新页面，表格显示更新的内容而没有删除的条目，所以一切似乎都正常工作，除了表格在确认后没有更新.

如果我按 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);
  };

现在，如果我尝试在延迟后再次“模拟刷新”运行 fetchData()，它可以正常工作，并且在模态关闭后组件会更新，而无需手动刷新页面。我假设我没有按应有的方式处理 ASYNC 行为。

此代码无需手动刷新即可工作：

useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
        setTimeout(() => {
          fetchData();
        }, 200);
      },
    };
  });

这是对 API 执行请求的异步方法：

export function getCategoryList(myToken) {
  return Promise.resolve(axios.get(CATEGORY_ENDPOINT, config(myToken)));
}

如果您还需要查看其他内容，请告诉我，我只发布了我认为与该问题相关的内容。

谢谢！

标签： javascriptreactjsasynchronouspromisereact-hooks

解决方案

我认为你的问题在这里：

 useEffect(() => {
    fetchData();
  }, []);

这个空数组 tolts 只对刷新一次做出反应，因此请尝试将 props 传递给它。

    useEffect(() => {
    fetchData();
  }, [info]);

应该管用。

仔细看看：https ://reactjs.org/docs/hooks-effect.html在接下来的步骤最后。

推荐阅读