我有这个组件（与App.js中的路由/product/:id关联）

import React, { useEffect} from 'react';
import { useSelector, useDispatch } from 'react-redux';

import Spinner from '../components/Spinner';
import { getProductDetails } from '../actions/productActions';

const ProductDetailsScreen = ({ match }) => {
  const { product, loading, error } = useSelector(
    (state) => state.productDetails
  );

  console.log(product);// < ------- This outputs the previously display product, then undefined, then the targeted product
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProductDetails(match.params.id));
  }, [match]);

  

  return (
    <div>
      <div className='container'>
        {loading ? (
          <Spinner />
        ) : error ? (
          <h1>{error}</h1>
        ) : (
          <div>
            <h1>{product.name}</h1>
            <span>
              <strong>Price: </strong>${product.price}
            </span>
          </div>
        )}
      </div>
    <div>
  );
};

export default ProductDetailsScreen;

在另一个组件中我有这个

<Link to={`/product/${_id}`}>View Details</Link>

它应该转到ProductDetailsScreen组件，并根据传递的_id用产品的详细信息填充屏幕。然而，尽管redux状态是从后端正确填充的，其中包含了_id被传递的产品的详细信息，但组件的元素并没有像预期的那样填充产品的详细信息，尽管我正在检查产品是否完成加载并且没有错误。该组件似乎基于console.log(product)渲染了3次。第一次它输出之前显示的产品（我想我需要清除状态），然后是undefined，然后是目标产品！
为什么？我做错什么了？
编辑1：
所述减速机

export const productDetailsReducer = (state = { product: {} }, action) => {
  const { type, payload } = action;
  switch (type) {
    case PRODUCT_GET_REQUEST:
      return { loading: true };
    case PRODUCT_GET_SUCCESS:
      return { loading: false, success: true, product: payload };
    case PRODUCT_GET_FAIL:
      return {
        loading: false,
        error: payload,
      };
    case PRODUCT_GET_RESET:
      return { product: {} };
    default:
      return state;
  }
};

和行动

export const getProductDetails = (productId) => async (dispatch) => {
  try {
    dispatch({
      type: PRODUCT_GET_REQUEST,
    });

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

    dispatch({
      type: PRODUCT_GET_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: PRODUCT_GET_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};