blocks|key|599119|text|我建议你做以下几件事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599120|首先，您应该创建从usePost+hook返回的fetch函数。|offset|length|style|CODE|599121|举例说明。|599122|export+const+usePost+=+()+=>+{
++const+[loading,+setLoading]+=+useState(false)
++const+[data,+setData]+=+useState([])

++const+fetch+=+()+=>+{
++++setStatus(loading)
++++apiRequest({
++++++url:+'my_url',
++++++method:+'GET',
+++
++++}).then(response+=>+{
++++++setStatus(false)
++++++setData(response.data.data)
++++}).catch(e+=>+{
++++++setStatus(false)
++++})
++}

++return+{
++++status,
++++data,
++++fetch
++}|code-block|syntax|javascript|599123|毕竟，您可以在组件中调用这个钩子。它将返回fetch函数。您应该调用onAccept中的fetch。|599124|599125|const+{+data,+loading,+fetch+}+=+usePost()

const+onAccept+=+()+=>+{
++++fetch()
+}

//+return
<button+onClick={()+=>+onAccept()}|599126|PS。如果需要，也可以从usePost+hook返回错误。|599127|entityMap^0|0|9|C|0|0|0|L|5|Y|8|0|0|0|C|C|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|13|8|@$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|Q|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|S|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|T|3|U|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|W|$]]

I can suggest you do the following.
At first, you should create fetch function which will be returned from <code>usePost hook</code>.
example.
<pre><code>export const usePost = () =&gt; {
 const [loading, setLoading] = useState(false)
 const [data, setData] = useState([])

 const fetch = () =&gt; {
 setStatus(loading)
 apiRequest({
 url: 'my_url',
 method: 'GET',
 
 }).then(response =&gt; {
 setStatus(false)
 setData(response.data.data)
 }).catch(e =&gt; {
 setStatus(false)
 })
 }

 return {
 status,
 data,
 fetch
 }
</code></pre>
After all, you can call this hook in your component. It will return <code>fetch</code> function. You should call fetch inside <code>onAccept</code>.
Example.
<pre><code>const { data, loading, fetch } = usePost()

const onAccept = () =&gt; {
 fetch()
 }

// return
&lt;button onClick={() =&gt; onAccept()}

 
</code></pre>
PS. if you need you can return errors from <code>usePost hook</code>, as well.

blocks|key|1565563|text|是的，您正在onAccept函数中调用onAccept钩子。你应该跟着反应钩规则。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1565564|为了解决你的问题，你可以这样做：|1565565|自定义钩子文件：|1565566|export+const+usePost+=+()+=>+{
++const+[status,+setStatus]+=+useState()

++const+handlePost+=+useCallback(async+(url,+data)+=>+{
++++//+your+api+request+logic+in+here,+bellow+only+show+example
++++try+{
++++++const+{data,+status}+=+await+apiCall(url,+data)
++++++if+(data+&&+status+===+200)+navigate(`/`)
++++}+catch+(error)+{
++++++console.log(error)
++++}
++},+[])

++return+{+handlePost+}
++//+to+return+status+to+component,+you+can+use+bellow.
++//+return+{+status,+handlePost+}
}|code-block|syntax|javascript|1565567|然后你的组件：|1565568|const+YourComponent:+React.FC+=+()+=>+{
++const+{+handlePost+}+=+usePost()
++//+To+get+status:+const+{+status,+handlePost+}+=+usePost()
++//+your+other+hooks+in+here
++//+Check+status
++useEffect(()+=>+{
++++if+(status+===+200)+{
++++++//+whatever+you+want+to+do
++++}
++},+[status])
++
++return+(
++++<>
++++++//+Your+component+UI+here
++++++...
++++++<button+onClick={()+=>+handlePost(url,+data)}>
++++</>
++)
}|1565569|您应该在组件的顶层调用自定义钩子(例如：usePost)，而不是像在代码中那样嵌套函数体(onAccept函数体)。|1565570|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/hooks-rules.html^0|6|8|J|8|Z|5|0|0|0|0|0|0|0|K|7|19|8|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1D|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

Yes, You are calling <code>usePost</code> hook inside of <code>onAccept</code> function. You should follow <a href="https://reactjs.org/docs/hooks-rules.html" rel="nofollow noreferrer">react hook rule</a>.
To solve your problem, you can do like that:
your custom hook file:
<pre><code>export const usePost = () =&gt; {
 const [status, setStatus] = useState()

 const handlePost = useCallback(async (url, data) =&gt; {
 // your api request logic in here, bellow only show example
 try {
 const {data, status} = await apiCall(url, data)
 if (data &amp;&amp; status === 200) navigate(`/`)
 } catch (error) {
 console.log(error)
 }
 }, [])

 return { handlePost }
 // to return status to component, you can use bellow.
 // return { status, handlePost }
}
</code></pre>
then your component:
<pre><code>const YourComponent: React.FC = () =&gt; {
 const { handlePost } = usePost()
 // To get status: const { status, handlePost } = usePost()
 // your other hooks in here
 // Check status
 useEffect(() =&gt; {
 if (status === 200) {
 // whatever you want to do
 }
 }, [status])
 
 return (
 &lt;&gt;
 // Your component UI here
 ...
 &lt;button onClick={() =&gt; handlePost(url, data)}&gt;
 &lt;/&gt;
 )
}
</code></pre>
You should call your custom hooks(for example: <code>usePost</code>) at the top level of component, not nested function body as like as you were doing in your code (<code>onAccept</code> function body).

blocks|key|666639|text|首先，从Function函数中调用钩子。阅读文档：https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|666640|其次，您应该在load钩子中使用某种usePost方法，例如：const+{+load+}+=+usePost(...)，以便在单击时发出POST请求。|style|CODE|666641|因此，您的处理程序将看起来像：|666642|const+onAccept+=+()+=>+{
++load();

++//+the+following+block+move+somewhere+before+you+render+the+component+or+better+use+useEffect+hook+for+that
++//+if+(data+&&+!error)+{
++//+++navigate(`/`);
++//+}
};|code-block|syntax|javascript|666643|我希望这能帮上忙。|666644|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions^0|P|26|0|0|7|4|I|7|V|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]|$A|15|B|16|F|G]|$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

First, call you hook from React Function. Read the docs: <a href="https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions</a>.
Second, you should have some sort of <code>load</code> method in your <code>usePost</code> hook, e.g.: <code>const { load } = usePost(...)</code>, in order to make POST request on click.
So your handler will look like:
<pre class="lang-js prettyprint-override"><code>const onAccept = () =&gt; {
 load();

 // the following block move somewhere before you render the component or better use useEffect hook for that
 // if (data &amp;&amp; !error) {
 // navigate(`/`);
 // }
};
</code></pre>
I hope this will help.

I have a button, <code>onClick</code> of that button I want to make a <code>POST</code> call with some data user has filled in an input field, stored in state, and then redirect the user to another page.
My current code looks like this, but I get an error:
<blockquote>
React Hook &quot;usePost&quot; is called in function &quot;onAccept&quot; which is neither a React function component or a custom React Hook function
</blockquote>
And the code doesn't work. I have created my own hook for <code>POST</code> calls.
What might a way to make the desired functionality work?
What I'm after is the ability to make a POST call and redirect.
Simplified example:
<pre><code>// my function
const onAccept = () =&gt; {
 const { data, loading, error } = usePost(
 &quot;MY_URL&quot;,
 { DATA: MY_DATA }
 );
 if (data &amp;&amp; !error) {
 navigate(`/`);
 }
};

// return
&lt;button onClick={() =&gt; onAccept()}
</code></pre>

React Hook for a POST call onClick

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个按钮，这个按钮的onClick，我想用一些数据用户进行POST调用，已经填充了一个输入字段，存储在状态中，然后将用户重定向到另一个页面。我的当前代码如下所示，但我得到了一个错误：React "usePost“在函数"onAccept”中被调用，它既不是React函数组件，也不是自定义React函数。代码也不起作...

问对POST调用onClick的
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对POST调用onClick的EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对POST调用onClick的
EN