revalidate path and update useState
Unanswered
Wool sower gall maker posted this in #help-forum
Wool sower gall makerOP
I have a form in a client component and when I add the data to my database and i call revalidatePath on that route my ui is not beeing updated what am I doing wrong here?
"use server"
export default async function Channels({params}: { params: { guildId: string } }) {
const settingsData = getSettings(params.guildId);
const creaturesData = getCreatures();
const [settings, creatures] = await Promise.all([settingsData, creaturesData])
const {channels} = settings;
if (!settings) {
console.log("Settings Page: failed to get data")
}
//after revalidating path my new data is in here!
console.log(channels);
return <>
<DashboardContent>
<DashboardHeader heading="Channels" text="Manage Bot settings." imageSource="/mage.jpg">
</DashboardHeader>
<div className="flex flex-col">
//ClientComponent
<ChannelSettings data={channels} params={params} creatures={creatures}></ChannelSettings>
</div>
</DashboardContent>
</>
}
4 Replies
Wool sower gall makerOP
inside the component
export default function ChannelSettings({data, params, creatures}: ChannelFormProps) {
const [selectedChannel, setSelectedChannel] = useState<Channel>(data[0]);
return (
{selectedChannel.huntingSpots.map((spot, index) => (
<HuntingSpotItem key={`${selectedChannel.id}-${index}`} params={params}
id={selectedChannel.id} huntingSpot={spot}/>
))}
Wool sower gall makerOP
my guess is the revalidate path is not triggering my useState because react doesnt rerender because the reference is still the same. Is this the expected behaviour of revalidatePath or how can i solve this issue?
Wool sower gall makerOP
yea i tested it and the problem relies on the useState any idea how I update the useState after revalidatePath?
try setting a key for
ChannelSettings
, it should rerender when the key change