React跨组件传值后CartList组件无法渲染购物车商品问题求助

你代码中存在多处逻辑与语法错误，按优先级修复如下：

1. Context引用错误（核心问题） #

你在Cart.js中重新创建了一个全新的ProductContext，和context.js中提供Provider的Context不是同一个实例，导致根本拿不到购物车数据。

修复： #

删除Cart.js中const ProductContext = React.createContext();这行，改为从context.js导入你已经定义好的ProductContext。

2. Cart.js判断逻辑错误 #

Consumer拿到的value是整个context状态对象，不是cart数组，对象本身没有length属性，所以你的判断条件永远为false，不会渲染子组件。

修复后的Cart.js代码： #

import React from "react";
import CartColumns from "./CartColumns";
import CartList from "./CartList";
// 从你的context.js导入已定义的ProductContext
import { ProductContext } from "./context"; 

export default class Cart extends React.Component {
  render() {
    return (
      <div>
        your cart
        <ProductContext.Consumer>
          {(value) => {
            // 正确判断cart数组长度
            if (value?.cart?.length > 0) {
              return (
                <div>
                  <CartColumns />
                  <CartList value={value}/>
                </div>
              );
            }
            // 建议加空状态提示
            return <div>购物车暂无商品</div>
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}

3. CartList.js语法错误 #

你没有按照类组件规范写render方法，也没有从props中取值，cart变量未定义，且重复导出了两次export default。

修复后的CartList.js代码： #

import React from "react";
import CartItem from "./CartItem"

export default class CartList extends React.Component {
  render() {
    // 从props拿到context值，再取cart数组
    const { value } = this.props;
    const { cart } = value;
    return <div>
      {cart.map((item) => {
        return (
          <CartItem key={item.id} value={value} item={item}/>
        )
      })}
    </div>;
  }
}

4. 其他不影响渲染但需要修复的潜在bug #

• context.js中setState的回调函数位置写错，你把回调写在了return的括号外面，不会执行，修改为：

this.setState(() => {
  return { products: tempProducts, cart: [...this.state.cart, product] }
}, () => console.log(this.state));

• context.js的openModal方法中state键名写错，你写的openModal: true对应state里的键是modalOpen，修改为：

return { modalProduct: product, modalOpen: true };

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