下面的代码工作正常，可以在从数据库中获取数据时成功显示和隐藏加载图像。
const App = () => {
const [loading, setLoading] = useState(true);
const base = useBase();
const tab1 = base.getTableByNameIfExists('myfirst_table');
// grab all the records from that table
const records = useRecords(tab1);
useEffect(() => {
if (records){
setLoading(false)
}
}, [records]);
}
// return content goes here
这是我的问题：在下面的代码中，我试图在单击按钮时发布消息。 在这方面，我想在提交表单时显示和隐藏加载图像，但它一直显示错误">无效的钩子调用。钩子只能在函数组件的主体内部调用。这是表单提交的情况
下面是一个示例代码
const Post = () => {
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState("");
function handleChange(event) {
setMessage(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
// set loading to true on button click
const [loading, setLoading] = useState(true);
/*
useEffect(() => {
setLoading(true)
}, []);
*/
// send message to
const message = "Hello Friends";
// set loading to false to hide the image after form submission
useEffect(() => {
// post data
if (message){
setLoading(false)
}
}, [message]);
}
返回内容到这里
钩子只能从功能组件的顶层调用，即在任何嵌套函数、循环、if 语句等外部调用。
你有以下声明
const [loading, setLoading] = useState(true);
在函数handleSubmit内部，它也是重复的，因为相同的语句已经存在于组件主体Post开头。
来自官方文档： 钩子规则 - 反应
不要在循环、条件或嵌套函数中调用 Hook。 相反，始终在 React 函数的顶层使用 Hooks。由 遵循此规则，您可以确保在同一中调用 Hook 每次渲染组件时的顺序
您多次使用相同的状态，并且同时使用useState和useEffect在函数内部，React 钩子只能在 React 函数组件中使用。