![钩子]( "钩子")
本文介绍了比上一次渲染时渲染了更多的钩子.使用 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>作者 </p><button type='submit'>提交文章</button></表单>
);};导出默认帖子；
自定义挂钩:
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
解决方案
您可以将 if 语句逻辑移到 usePost 钩子中.
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]);};
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:
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;
Custom Hook:
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
解决方案
You can move the if-statement logic into the 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]);
};
这篇关于比上一次渲染时渲染了更多的钩子.使用 React Hooks 发布表单数据时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！