React使用useReducer时触发未知action错误，弹窗无法正常显示如何解决？

错误出现在handleSubmit的空值判断分支：你给dispatch传入的是字符串'NO_VALUE'，但reducer要求接收的action必须是包含type字段的对象。此时reducer拿到的action是字符串类型，读取action.type会得到undefined，自然匹配不到任何分支，最终抛出无匹配action类型的错误。

把else分支的dispatch调用修改为正确的对象格式即可：

else{
  dispatch({type:'NO_VALUE'});
}

1. 你的Index组件缺失useState、useReducer的导入，需要补充导入语句：

import React, { useState, useReducer } from 'react'

2. Modal组件里的useEffect没有指定依赖数组，也没有清理定时器，会导致组件每次渲染都重新设置定时器，存在内存泄漏风险，建议修改为：

useEffect(()=>{
  const timer = setTimeout(()=>closeModal(),3000)
  return () => clearTimeout(timer)
},[closeModal])

内容的提问来源于stack exchange，提问作者user16792099