比上一次渲染时渲染了更多的钩子.使用 React Hooks 发布表单数据时 [英] Rendered more hooks than during the previous render. when posting form data with React Hooks

查看：100 发布时间：2021/7/3 19:29:29 reactjs react-hooks
本文介绍了比上一次渲染时渲染了更多的钩子.使用 React Hooks 发布表单数据时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

今天遇到了钩子的问题.我知道有一个类似的帖子，我阅读了使用钩子的规则.现在当我发布表单时，它给了我那个错误.我知道这是因为我的钩子在 if 语句中.但是我怎样才能把它弄出来呢?如果它不在函数或语句中，我不知道如何使用此钩子.任何建议将不胜感激.代码如下:
import React, { FunctionComponent, useState, useEffect } from 'react';从 '../hooks/usepost' 导入 usePost从'./article'导入文章；界面文章发布{标题:字符串，身体:字符串，作者:字符串}const 帖子:FunctionComponent = () =>{const [details, detailsReady] = useState({})const postArticle = (e) =>{e.preventDefault()const postDetails = {标题:e.target.title.value，正文:e.target.body.value，作者:e.target.author.value}详细信息准备好(发布详细信息)}if (Object.keys(details).length !== 0) {控制台日志(详细信息)usePost('http://localhost:4000/kb/add', 详情)}返回 (<div><form onSubmit={postArticle}><p>标题<输入类型='文本'名称='标题'/></p><p>正文 </p><p>作者 <input type='text' name='author'/></p><button type='submit'>提交文章</button></表单></div><p>);};导出默认帖子；</code></pre><p>自定义挂钩:</p><pre><code>import React, { useState, useEffect } from 'react';从 'axios' 导入 axios；const usePost = (url, postDetails) =>{//设置空对象为数据控制台日志(网址，DFLSKDJFSDLKFJDLKJFDLFJ")console.log(postDetails)useEffect(() => {console.log('usePost 正在运行')axios.post(url, postDetails).then(res => {控制台日志(res)返回})}, [postDetails]);};导出默认 usePost</code></pre><p></p><div class="h2_lin"> 解决方案 </div><p>您可以将 if 语句逻辑移到 <code>usePost</code> 钩子中.</p><pre><code>const usePost = (url, postDetails) =>{useEffect(() => {if (Object.keys(postDetails).length === 0){return console.log('不发帖');//如果没有详细信息，则不要发布任何内容}//否则，发布console.log('usePost 正在运行')axios.post(url, postDetails).then(res => {控制台日志(res)返回})}, [postDetails]);};</code></pre><p><p>Ran into a problem with hooks today.  I know there is a similar post, and I read the rules of using hooks.  Right now when I post my form, it gives me that error.  And I know that's because my hook is INSIDE an if statement.  But how can I get it out? I don't know how else to use this hook if it's not in a function or a statement.  Any advice would be greatly appreciated.   Here is the code:</p><pre><code>import React, { FunctionComponent, useState, useEffect } from 'react';
import usePost from '../hooks/usepost'
import Article from './article';

interface ArticlePosted {
    title: string,
    body: string,
    author: string
}
const Post: FunctionComponent = () => {

    const [details, detailsReady] = useState({})
    const postArticle = (e) => {
        e.preventDefault()
        const postDetails = {
            title: e.target.title.value,
            body: e.target.body.value,
            author: e.target.author.value
        }
        detailsReady(postDetails)
    }

    if (Object.keys(details).length !== 0) {
        console.log(details)
        usePost('http://localhost:4000/kb/add', details)
    }
    return (
        <div>
            <form onSubmit={postArticle}>
                <p>
                    Title <input type='text' name='title' />
                </p>
                <p>
                    Body <textarea name='body' rows={4} />
                </p>
                <p>
                    Author <input type='text' name='author' />
                </p>
                <button type='submit'>Submit Article</button>

            </form>
        </div>
    );
};

export default Post;
</code></pre><p>Custom Hook:</p><pre><code>import React, { useState, useEffect } from 'react';
import axios from 'axios';

const usePost = (url, postDetails) => {
    //set empty object as data
    console.log(url, "DFLSKDJFSDLKFJDLKJFDLFJ")

    console.log(postDetails)
    useEffect(() => {
        console.log('usePost running')
        axios.post(url, postDetails)
            .then(res => {
                console.log(res)
                return
            })
    }
        , [postDetails]);

};

export default usePost
</code></pre><p>
</p><div class="h2_lin"> 解决方案 </div><p>You can move the if-statement logic into the <code>usePost</code> hook.</p><pre><code>const usePost = (url, postDetails) => {
    useEffect(() => {
        if (Object.keys(postDetails).length === 0){
            return console.log('Not posting'); // Don't post anything if no details
        }
        // Otherwise, post away
        console.log('usePost running')
        axios.post(url, postDetails)
            .then(res => {
                console.log(res)
                return
            })
    }
        , [postDetails]);

};
</code></pre><p>

                        <p>这篇关于比上一次渲染时渲染了更多的钩子.使用 React Hooks 发布表单数据时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2363856');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="比上一次渲染时渲染了更多的钩子" href="/2363407.html">
                            比上一次渲染时渲染了更多的钩子;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Uncaught Invariant Violation:渲染的钩子比上一次渲染时更多" href="/2363691.html">
                            Uncaught Invariant Violation:渲染的钩子比上一次渲染时更多;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="“比上一次渲染时渲染了更多的钩子"当钩子的初始值是来自数据库的查询结果时出错" href="/2363400.html">
                            “比上一次渲染时渲染了更多的钩子"当钩子的初始值是来自数据库的查询结果时出错;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="当值相等时，React 钩子 useState setValue 仍然重新渲染一次" href="/2363641.html">
                            当值相等时，React 钩子 useState setValue 仍然重新渲染一次;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="当 value 相等时，React hooks useState setValue 仍然重新渲染一次" href="/2840439.html">
                            当 value 相等时，React hooks useState setValue 仍然重新渲染一次;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用 React Hooks 专注于下一次渲染" href="/2363628.html">
                            如何使用 React Hooks 专注于下一次渲染;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React Hooks渲染两次" href="/1831612.html">
                            React Hooks渲染两次;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="一次渲染阴影" href="/1772463.html">
                            一次渲染阴影;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React 组件不会在第一次状态更新时重新渲染" href="/2365325.html">
                            React 组件不会在第一次状态更新时重新渲染;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React:每 4 列渲染一次新行" href="/2364530.html">
                            React:每 4 列渲染一次新行;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在Android上渲染WebView时，屏幕闪烁一次" href="/1923250.html">
                            在Android上渲染WebView时，屏幕闪烁一次;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="仅在树枝模板的for循环内渲染一次表单" href="/2089130.html">
                            仅在树枝模板的for循环内渲染一次表单;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React Hooks useCallback 导致孩子重新渲染" href="/2363584.html">
                            React Hooks useCallback 导致孩子重新渲染;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="渲染模板时，Ember中的全局钩子" href="/678065.html">
                            渲染模板时，Ember中的全局钩子;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="希望在第一次渲染时设置一次状态，而不会导致进一步更新时不必要的重新渲染" href="/1885601.html">
                            希望在第一次渲染时设置一次状态，而不会导致进一步更新时不必要的重新渲染;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="UI 不会使用 React Hooks 和表单提交重新渲染状态更新" href="/2363602.html">
                            UI 不会使用 React Hooks 和表单提交重新渲染状态更新;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="一次渲染到完整的3D渲染目标" href="/1880620.html">
                            一次渲染到完整的3D渲染目标;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React Hooks:如何在渲染前等待数据被获取" href="/2748793.html">
                            React Hooks:如何在渲染前等待数据被获取;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在渲染之前获取 useEffect 钩子中的数据 - React" href="/2460182.html">
                            在渲染之前获取 useEffect 钩子中的数据 - React;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用 React 钩子和备忘录时如何防止子组件重新渲染?" href="/2363636.html">
                            使用 React 钩子和备忘录时如何防止子组件重新渲染?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="用钩子反应渲染两次" href="/2748727.html">
                            用钩子反应渲染两次;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React Native FlatList 在添加新数据时重新渲染已经渲染的项目" href="/2859376.html">
                            React Native FlatList 在添加新数据时重新渲染已经渲染的项目;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="当添加新数据时，React Native FlatList重新渲染已经渲染的项目" href="/2248551.html">
                            当添加新数据时，React Native FlatList重新渲染已经渲染的项目;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="为什么我的 React 组件渲染了两次?" href="/2698554.html">
                            为什么我的 React 组件渲染了两次?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="淘汰后渲染，但只有一次" href="/2738895.html">
                            淘汰后渲染，但只有一次;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>其他开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'" href="/893060.html">
                            拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin';
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html">
                            什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在运行npm install命令时获取'npm WARN弃用'警告" href="/840917.html">
                            在运行npm install命令时获取'npm WARN弃用'警告;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="cmake无法找到openssl" href="/516280.html">
                            cmake无法找到openssl;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html">
                            从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Twitter :: Error :: Forbidden  - 无法验证您的凭据" href="/630061.html">
                            Twitter :: Error :: Forbidden  - 无法验证您的凭据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html">
                            我什么时候需要一个fb：app_id或者fb：admins？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将.db文件导入R" href="/902960.html">
                            将.db文件导入R;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html">
                            npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”" href="/819167.html">
                            拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = '比上,一次,渲染,时,渲染,了,更多,的,钩子,使用,react,hooks,发布,表单,数据,时'; var cat = 'cc';';//other-dev</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>