React Hooks错误处理将状态转换为功能

Question

您好，我创建了一个表单，该表单使用 React Hooks 上传文件。单击上传按钮后，文件将使用axios发送到服务器。因此，我尝试使用try / catch块来处理可能发生的错误。发生错误时，分派功能不会设置状态。发生错误时，当前状态变为函数

下面是stackblitz上的代码链接：

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 here的更多信息。