我似乎真的在react和hooks上遇到了麻烦。我知道这个问题可能是react-dom的问题。我正在看一个教程，它用5来做这个，而我用的是6。我看了文档，但老实说我找不到问题所在。它在我的主页上工作，但是现在产品页面不工作了，老实说，我在过去的答案中找不到任何关于这个问题的答案。有人有什么想法吗？谢谢！

import React, {useState, useEffect} from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { listProductDetails } from '../actions/productActions'

function ProductScreen({match}) {

    const dispatch = useDispatch()
    const productDetails = useSelector(state => state.productDetails)
    const {loading, error, product} = productDetails

    useEffect(() =>{
        dispatch(listProductDetails(match.params.id))

    },[])

ProductActions.js:

export const listProductDetails = (id) =>  async(dispatch) => {
    try {
        dispatch({type: PRODUCT_DETAILS_REQUEST})

        const { id } = useParams();

        const {data} =  await axios.get(`/api/products/${id}`)

        dispatch({
            type: PRODUCT_DETAILS_SUCCESS,
            payload: data
        })
    } catch (error) {
        dispatch({
            type: PRODUCT_DETAILS_FAIL,
            payload: error.response && error.response.data.message
            ? error.response.data.message
            : error.message, 
        })
    }
}

productReducer.js:

export const productDetailsReducer = (state={product:{reviews:[]}},action) => {
    switch(action.type){
        case PRODUCT_DETAILS_REQUEST:
            return {loading:true, ...state}

        case PRODUCT_DETAILS_SUCCESS:
            return {loading:false, product:action.payload}

        case PRODUCT_DETAILS_FAIL:
            return {loading:false, error: action.payload}

        default:
            return state
    }
}

store.js:

import { legacy_createStore as createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import {productListReducer,productDetailsReducer} from './reducers/productReducers'

const reducer = combineReducers({
    productList: productListReducer,
    productDetails: productDetailsReducer,
})
const initialState = {}
const middleware = [thunk]
const store = createStore(reducer, initialState, 
    composeWithDevTools(applyMiddleware(...middleware)))

export default store