我收到错误无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Question

我试图在每个答案负载上传到服务器时显示进度或加载栏，并在整个任务完成时显示成功消息？这是我的代码，但我收到错误消息Invalid hook call. Hooks can only be called inside of the body of a function component.。

还要注意getOfflineSavedAnswers 是一个导入函数，因此我不能在此处将其设置为函数。

export default function UploadReport(type) {
    const [success, setSuccess] = useState(false) 

    useEffect(() => {
    getOfflineSavedAnswers(type).then(async answers => {
        if (answers && answers.length > 0) {
            try {
                for (const answer of answers) {
                    try {
                        await axios.post('/report/question/create-answer', answer)
                        .then(res => {
                            delAnswers("phcss")
                            setSuccess(true)
                        //  ts(`Answers successfully saved!`);
                        })
                        .catch(err => {
                            console.error(err);
                            delAnswers("phcss")
                            te(`Answers submission failed!`)
                        });
                    } catch (error) {
                        console.error(error);
                        delAnswers("phcss")
                        te(`Answers submission failed!`)
                    }
                }
                if(success){
                    ts(`Answers successfully submitted!`);
                }
                setSuccess(false)
            } catch (error) {
                console.error(error);
                te(`Answers submission failed!`)
            }
        }

    });
});
    return(
      success ? 'uploading ans...' : null
    )
};

此代码将由另一个类组件调用，如下所示，其中有多个任务

sendReportToServer = () => {
    UploadReport("phc", (msg, error) => {
        if (error) {
            te("Could not upload answer data");
        } else {
            ts(msg);
        }
    })
    UploadAnswer("phc", (msg, error) => {
        if (error) {
            te("Could not upload answer data");
        } else {
            ts(msg);
        }
    })
    UploadQuestion("phc", (msg, error) => {
        if (error) {
            te("Could not upload answer data");
        } else {
            ts(msg);
        }
    })
};

没有钩子，当我做export const uploadReport = async (type) => { 时它工作得很好。但是我引入了钩子，因为我想在每个答案有效负载上传到服务器时显示进度条或加载条，并在整个任务完成时显示成功消息

Answer 1

钩子只有在 React 组件中使用时才有意义 - 即<MyComponent {...myProps}/>。它们不能在普通的 JavaScript 函数中使用（也没有意义）——例如UploadReport('phc',...).

纯 JavaScript 函数不能有状态或生命周期（无效果）。

只需在父组件中创建一个常规异步函数并更新状态。您不需要（也不能拥有）常规函数中的状态或效果。

像这样：

const MyParentComponent = (props) => {

 const [sending, setSending] = useState(false);

 const handleSendReportToServer = async () => {
    setSending(true);
    await callToSomeAsyncFunctionLikeUploadReport();
    setSending(false);
 }

 return {/* some jsx */}

}