我正在尝试根据表单提交在功能组件内进行API调用:
const SearchForm = () => {
const [keywords, setKeywords] = useState('')
const [fetchedData, setFetchedData] = useState('')
const handleSubmit = (e) => {
e.preventDefault();
useEffect(() => {
async function fetchData() {
const {data} = await axios.post('http://127.0.0.1:8000/api/posts/', keywords)
setFetchedData(data);
}
fetchData()
})
}
return (
<div>
<form onSubmit={ handleSubmit }>
<div className='input-field'>
<input placeholder="Search whatever you wish"
type="text"
value={keywords}
onChange={(e) => setKeywords(e.target.value)}
/>
</div>
</form>
</div>
)
}
但是,当我尝试此操作时,出现以下错误:
React Hook "useEffect" is called in function "handleSubmit" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
我该如何进行?
因为不是useEffect用来的。您也不需要在处理程序中调用它。
从文档中:
仅从React函数调用挂钩而不从常规JavaScript函数调用挂钩。相反,您可以:
React从React函数组件中调用Hook。
custom从自定义挂钩中调用挂钩(我们将在下一页中了解它们)。通过遵循此规则,可以确保组件的所有状态逻辑从其源代码中清晰可见。
如果您希望在功能组件上读取数据,可以使用useEffect:
useEffect(() => {
fetchData()
}, [])
并且您希望通过单击按钮触发获取呼叫:
const handleSubmit = e => {
e.preventDefault()
fetchData()
}
因此,整个代码将如下所示:
const SearchForm = () => {
const [keywords, setKeywords] = useState('')
const [fetchedData, setFetchedData] = useState('')
async function fetchData() {
const { data } = await axios.post(
'http://127.0.0.1:8000/api/posts/',
keywords
)
setFetchedData(data)
}
useEffect(() => {
fetchData()
}, [])
const handleSubmit = e => {
e.preventDefault()
fetchData()
}
return (
<div>
<form onSubmit={handleSubmit}>
<div className="input-field">
<input
placeholder="Search whatever you wish"
type="text"
value={keywords}
onChange={e => setKeywords(e.target.value)}
/>
</div>
</form>
</div>
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句