React集成Redux报错：Hooks只能在函数组件体内调用

问题描述 #

我是React新手，在新项目中集成Redux后出现错误，集成前应用运行正常。已添加store、action和reducer文件，尝试在组件中使用Redux时出现错误：Hooks can only be called inside of the body of a function component。我的react-dom版本是18.2，希望能得到帮助。

相关代码 #

集成Redux的组件代码 #

function Addproduct() {

const navigate = useNavigate();

const { values, setFieldValue, errors, touched, handleBlur, handleChange, handleSubmit} = useFormik({
    initialValues: initialValues,
    validationSchema: addproductSchema,
    onSubmit: (vḁl̥u̥es,{resetForm}) => {
        
        console.log('vḁl̥u̥es: ', vḁl̥u̥es);
        resetForm()
        
    }
})



const PostAdd = async (e) => {
    e.preventDefault();

    const products=useSelector((state)=> state)
    const dispatch=useDispatch()

    const { brandname, productname, picture, quantity, price, description } = values;

    const email = localStorage.getItem('email')

    await axios.post("http://localhost:5000/addproduct", {
        brandname, productname, quantity, price, description, email
    })

        .then((response) => {
            console.log(response.data);
            window.alert("Product added successfully")
            dispatch(addProduct(response.data))
        })
        .catch((err) => {
            console.log(err)
            console.log(err.response)
            window.alert("Error adding Product Details")
        })
}

Reducer文件代码 #

const initialState = {
products: []
}


 export const productReducer = 
 (state=initialState, { type, payload }) => {
  switch (type) {
    case ActionTypes.ADD_PRODUCTS:
        return {...state,products:payload}
    default:
        return state;
}
}

Action文件代码 #

export const addProduct = (products) =>{
return {
    type:ActionTypes.ADD_PRODUCTS,
    payload:products
    
}
}

错误原因与修复方案 #

错误原因 #

React Hooks（包括Redux提供的useSelector和useDispatch）必须遵守Hook调用规则：只能在函数组件的顶层作用域调用，不能嵌套在内部函数、条件判断或循环中。你将useSelector和useDispatch放在了PostAdd这个内部异步函数里，违反了这一规则，因此触发了报错。

修复步骤 #

1. 将useSelector和useDispatch移到Addproduct组件的顶层，和其他Hook（useNavigate、useFormik）同级定义
2. 在PostAdd函数中直接使用已经在顶层定义好的dispatch变量

修复后的组件代码 #

function Addproduct() {
    // 移到组件顶层的Redux Hooks
    const products = useSelector((state) => state)
    const dispatch = useDispatch()

    const navigate = useNavigate();

    const { values, setFieldValue, errors, touched, handleBlur, handleChange, handleSubmit} = useFormik({
        initialValues: initialValues,
        validationSchema: addproductSchema,
        onSubmit: (vḁl̥u̥es,{resetForm}) => {
            
            console.log('vḁl̥u̥es: ', vḁl̥u̥es);
            resetForm()
            
        }
    })

    const PostAdd = async (e) => {
        e.preventDefault();

        const { brandname, productname, picture, quantity, price, description } = values;

        const email = localStorage.getItem('email')

        await axios.post("http://localhost:5000/addproduct", {
            brandname, productname, quantity, price, description, email
        })
        .then((response) => {
            console.log(response.data);
            window.alert("Product added successfully")
            dispatch(addProduct(response.data))
        })
        .catch((err) => {
            console.log(err)
            console.log(err.response)
            window.alert("Error adding Product Details")
        })
    }
}

内容的提问来源于stack exchange，提问作者Vysakh M Nair