反应钩子错误处理将状态转换为函数

Question

嗨，我创建了一个使用React Hooks上传文件的表单。单击上传按钮后，将使用 axios 将文件发送到服务器。所以我也尝试使用 try/catch 块处理可能发生的错误。调度函数在出现错误时不设置状态。出现错误时，当前状态变为函数

以下是堆栈闪电战代码的链接：

https://stackblitz.com/edit/react-fe3wqk

如何解决此问题？

Answer 1

这是因为您传递给 useReducer 的函数返回的是函数而不是状态对象。尝试将其重构为：

function fileStatusReducer(state, action) {
switch (action.type) {
case "UPLOADING":
return {
...state,
uploading: !state.uploading,
status: "Uploading..."
};
case "ERROR":
return {
...state,
status: action.message
};
default:
break;
}
}

您可以在此处阅读有关useReducer的更多信息。