Reactjs 渲染的钩子比上一次渲染期间的钩子多。使用React钩子过帐表单数据时

今天钩子出了问题。我知道也有类似的帖子，我读过使用钩子的规则。现在当我发布我的表单时，它给了我那个错误。我知道这是因为我的钩子在if语句中。但是我怎样才能把它弄出来呢？如果这个钩子不在函数或语句中，我不知道如何使用它。如有任何建议，将不胜感激。代码如下：

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;

---

您可以将if语句逻辑移动到

usePost

hook中

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]);

};

---

那么它如何知道如何从post组件发送数据呢？将if语句移动到

useffect

中。如果

postDetails

包含任何内容，效果挂钩将发布到url，否则它将提前返回并停止运行函数的其余部分。谢谢你！仅仅因为某些东西能工作并不意味着它是好代码。你为什么还要使用useEffect@lakerskill@FabricioG我想如果他们保持静止的话，湖人队不想在每一次重播时都转载细节。如果（postDetails==prevPostDetails）可以手动

完成，但这更容易。
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]);

};