渲染更新/创建/删除数据的 useEffect 问题答案

【问题标题】：useEffect issue on rendering updated/created/deleted data渲染更新/创建/删除数据的 useEffect 问题
【发布时间】：2021-12-29 00:59:37
【问题描述】：

我目前正在尝试做一个习惯跟踪器应用程序，功能都“很好”，但我遇到了渲染问题。当我 POST/PUT/DELETE 任何东西时，它都可以工作，但是为了看到更改，我需要硬刷新，所以这是 useEffect 或 state 的一个明显问题，我不是最擅长使用 useEffect 所以我不知道传递给依赖数组以使其重新渲染的内容。我对编码和 react/nextjs 有点陌生，所以如果我的代码不是最好的，我深表歉意。 https://ibb.co/dK2g5Hd

我尝试在依赖数组中添加habitsForCheckBox，但如果我将它放入依赖数组中，它不会停止渲染。这是我唯一的猜测，因为那是显示数据的内容。任何帮助将不胜感激！

【问题讨论】：

请使用代码块，不要使用图像代码。

标签： reactjs react-hooks next.js

【解决方案1】：

提取您的代码以在单独的函数中从 useEffect 中获取习惯，然后在您的 useEffect 中以及在您的 POST/PUT/DELETE 操作完成后调用该函数

【讨论】：

哦，我将在其中获取类似“全局”getAllHabits 函数，然后在我的 useEffect 中调用它。当您说“在您的 POST/PUT/DELETE 操作完成之后”时，您的意思是在 updateHabitCompletion 函数内部进入第 44 行并调用该函数？类似于转到第 44 行并简单地调用 getAllHabits() 以便我通过调用该函数再次获取？
没错！请注意，这是有效的，因为您的 AJAX 调用正在使用 await，因此在调用 fetch 方法后调用 getAllHabits() 完全没问题！ PS1：如果您觉得我的回答有帮助，请将其标记为答案，ty！ PS2：下次不要分享图片，最好把你的代码粘贴到codesandbox.io之类的服务中，这样我们就可以玩了，问候。

【解决方案2】：

为了让 POST/PUT/DELETE 更新您正在显示的数据，您需要重新获取它。这样做肯定有很多模式。

一种选择是将提取抽象为它自己的函数，并在每次对数据进行任何突变时调用它。在这种情况下，制作自定义钩子会让事情变得更容易。

const [data, refetch] = useGetHabits();

这样的东西可以让你在任何地方使用data，并在你更新它时使用refetch，这已经确保data是最新的。

这是 useSWR 之类的库所采用的方法，带有 mutate 函数（如果在没有属性的情况下调用它，它会重新获取数据）。这是一个非常有用的库，由与 NextJS 相同的团队制作，您可以考虑使用。

自定义挂钩对于“挂钩”到 JS Promise 的生命周期也很有用。所有异步函数都返回 Promise，这个 Promise 的状态有助于定义异步值是否准备好。通过使用自定义钩子，您可以非常轻松地处理此生命周期（无需一直在现场执行await）并在加载时添加一个很好的加载指示器。 useSWR 也处理这个问题。类似以下的内容将是一种常见的模式。

const { data, error, mutate } = useSWR(url);

if (error) {
  return <ErrorIndicator error={error} />;
}

if (!data && !error) {
  return <LoadingIndicator />;
}

return <MyComponent data={data} onUpdate={() => mutate()} />;

另一种选择是在每次更新/删除/创建时从 API 返回数据。这样一来，您的所有调用都可以立即使用新数据更新 UI。

【讨论】：