React Context API返回Undefined值问题排查：电商应用全局状态传值异常

我来帮你搞定这个问题！点击按钮后action.item全是undefined的核心原因，是你的Card组件没有接收到有效的产品属性值，下面是具体的排查和修复步骤：

问题根源 #

1. Card组件的props未被正确传入：虽然你在Card的参数里声明了要接收id、title等属性，但在实际使用Card的地方（比如产品列表组件），并没有把真实的产品数据传递给它，导致这些props默认都是undefined。
2. Card内部硬编码内容，未使用props：原代码里Card的渲染内容是写死的（比如固定的三星手机标题、图片），就算传入了props也不会体现出来，这也会让你误以为数据传递逻辑有问题。

修复步骤 #

1. 修改Card组件，用props渲染内容 #

把硬编码的内容替换成传入的props，同时确保组件正确导出：

import styled from 'styled-components' 
import { FaStar } from "react-icons/fa"; 
import { useStateValue } from '../context/StateProvider' 

const Card = ({ id, title, price, image, rating }) => { 
  const [{ cart }, dispatch] = useStateValue(); 
  const addToCart = (e) => { 
    e.preventDefault() 
    dispatch({ 
      type: 'ADD_TO_CART', 
      item: { id, title, price, image, rating } 
    }) 
  } 

  // 根据rating渲染对应数量的星星
  const renderRatingStars = () => {
    return Array(rating).fill().map((_, idx) => (
      <FaStar key={idx} color='#ff9900' size={25} />
    ))
  }

  return ( 
    <Container> 
      <Image> 
        <img src={image} alt={title} /> {/* 使用传入的图片和标题 */}
      </Image> 
      <Info> 
        <h4>{title}</h4> {/* 使用传入的产品标题 */}
        {renderRatingStars()} {/* 使用传入的rating渲染星星 */}
        <p>₹{price.toFixed(2)}</p> {/* 使用传入的价格 */}
        <button onClick={addToCart}>Add To Cart</button> 
      </Info> 
    </Container> 
  ) 
}

// 必须导出组件才能在其他地方使用
export default Card;

2. 在使用Card组件时，正确传递props #

假设你有一个产品列表组件（比如ProductList.jsx），需要从产品数据中取出每个产品的属性，传递给Card组件：

import Card from './Card';

// 示例产品数据，实际可以从API获取
const productData = [
  {
    id: 1,
    title: "Samsung Galaxy S20 FE 5G (Cloud Navy, 8GB RAM, 128GB Storage)",
    price: 39990.00,
    image: "https://images-eu.ssl-images-amazon.com/images/I/41ezRvTwcaL._AC_SR400,600_.jpg",
    rating: 4
  },
  // 可以添加更多产品
];

const ProductList = () => {
  return (
    <div>
      {productData.map(product => (
        <Card
          key={product.id} // 必须给列表项加唯一key
          id={product.id}
          title={product.title}
          price={product.price}
          image={product.image}
          rating={product.rating}
        />
      ))}
    </div>
  );
};

export default ProductList;

3. 验证StateProvider逻辑（可选） #

你的StateProvider、Reducer和index.js的配置是完全正确的：useReducer返回的[state, dispatch]被正确传递给了上下文，useStateValue()可以正确解构出cart和dispatch，这部分不需要修改。

完成以上修改后，点击"Add To Cart"按钮时，控制台打印的action.item就会包含正确的产品数据，全局状态的cart也会正确添加对应的产品了。

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