Closed ooker777 closed 4 months ago
The main point of hooks is to attach logic to the component lifecycle like when it renders, when it's created or when it's destroyed. Using hooks for anything else is not necessary. An event handler is not part of the component lifecycle. It's just a function that the browser calls in response to some event. It runs completely separate from the component lifecycle
Hooks can only be used inside a component context, which is why this error is thrown. But here the useEffect
is called inside an event handler instead. Event handlers are not part of the component lifecycle.
In your case you don't even need a hook in there. You can just call the fetch directly.
export default function Test() {
return (
<form onSubmit={(e: FormDataEvent) =>
- useEffect(()=> {
- fetch('https://example.com/').then(console.log).catch(console.error)
- },[e.currentTarget])}
<form onSubmit={(e: FormDataEvent) =>
+ fetch('https://example.com/').then(console.log).catch(console.error)
+ }
>
<input/>
<button type="submit">submit</button>
</form>
)
}
In
islands/test.tsx
:In
routes/index.tsx
:Do you have any idea why this happens?