如何消除React中useReducer的dispatch方法‘参数数量无效，预期为0’警告

问题原因 #

你遇到的警告是因为useReducer的第三个参数传入了undefined，导致编辑器/ESLint的类型推断出现异常，错误认为dispatch函数不需要接收参数。另外代码中还有一处冗余的数组包裹写法，虽不影响功能但建议修正。

解决方案 #

1. 移除useReducer的第三个参数
   当不需要自定义初始化函数时，useReducer仅需传入reducer函数和初始state两个参数。将：

const [state, dispatch] = useReducer(reducer, initialState, undefined)

修改为：

const [state, dispatch] = useReducer(reducer, initialState)

2. 修正handleChange中的payload写法
   你在handleChange里把name用数组包裹（name: [name]），虽JS会自动将数组转为字符串作为对象键，但属于冗余写法，修正为直接传入字符串：

const handleChange = (e) => {
    let name = e.target.name;
    dispatch({type: 'input', payload: {name, value: e.target.value}})
}

修正后的核心代码片段 #

const initialState = {
    data: {name: '', password: '', code: ''},
    isChecked: false,
    error: {security: false},
    captchaNumber: Math.floor(Math.random()*90000) + 10000,
}

const reducer = (state, action) => {
    switch (action.type){
        case 'input':
            return {...state, data: {...state.data, [action.payload.name]: action.payload.value}}
        case 'checkbox':
            return {...state, isChecked: action.payload}
        case 'error':
            return {...state, error: {...state.error, security: action.payload}}
        case 'captcha':
            return {...state, captchaNumber: action.payload}
        default:
            throw new Error();
    }
}

const LoginForm = () => {
    const [state, dispatch] = useReducer(reducer, initialState)
    let passwordRef = useRef();
    const navigate = useNavigate();

    const handleChange = (e) => {
        let name = e.target.name;
        dispatch({type: 'input', payload: {name, value: e.target.value}})
    }
    // 其余函数保持不变
}

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