我目前正在尝试做一个习惯追踪器应用程序，功能是所有的"良好"；，但我有渲染问题。当我POST/PUT/DELETE任何东西时，它都是有效的，但为了看到更改，我需要硬刷新，所以这是useEffect或状态的一个明显问题，而且我不擅长使用useEffect，所以我不知道该向依赖数组传递什么来使其重新呈现。我对编码和react/nextjs有点陌生，所以如果我的代码不是最好的，我很抱歉。https://ibb.co/dK2g5Hd
我尝试在依赖数组中添加habitsForCheckBox，但如果我将其放入依赖数组中，它不会停止渲染。这是我唯一的猜测，因为这就是显示数据的原因。如有任何帮助，我们将不胜感激！
提取您的代码，在一个单独的函数中从useEffect中获得习惯，然后在您的useEffect和POST/PUT/DELETE操作完成后调用该函数
为了让POST/PUT/DELETE更新您显示的数据，您需要对其进行重新蚀刻。当然有很多模式可以做到这一点。
一种选择是将提取抽象到它自己的函数中，并在每次对数据进行任何突变时调用它。在这种情况下，制作一个自定义钩子会让事情变得更容易。
const [data, refetch] = useGetHabits();
这样的东西可以让你在任何地方使用data，在任何时候更新refetch，这已经确保了data是最新的。
这是像useSWR这样的带有mutate函数的库所采用的方法(如果在没有属性的情况下调用该函数，则会引用数据(。这是一个非常有用的库，由与NextJS相同的团队制作，您可以使用它进行研究。
自定义挂钩对于"；钩子"；进入JSPromise的生命周期。所有异步函数都返回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。