React类组件中购物车满足条件却无法渲染对应JSX组件问题求助

存在的问题 #

• JSX 中直接书写 JavaScript 逻辑没有用花括号{}包裹，React 会将if语句识别为普通文本，不会执行判断逻辑
• 未从 Context 传递的value参数中获取cart数组，直接使用cart会报变量未定义错误
• 组件名拼写错误：代码中写的CartColums和预期渲染的CartColumns不匹配
• 条件判断没有兜底分支，cart长度不大于0时没有返回有效内容
• 当前文件重复创建了ProductContext实例，和上层提供数据的Provider不是同一个上下文，根本无法拿到共享的cart数据

修复后的完整代码 #

import React from 'react'
import CartList from "./cart/CartList"
// 补全CartColumns的导入
import CartColumns from "./cart/CartColumns"
// 删掉当前文件创建context的代码，替换为从你定义context的文件导入
// 示例：import { ProductContext } from './context/ProductContext'
const ProductContext = React.createContext(); // 这行如果是本地测试可以保留，实际使用要换成导入

export default class Cart extends React.Component {
  render() {
    return (
      <div>
        <ProductContext.Consumer>
          {(value) => {
            // 从context返回的value中取出cart数组
            const { cart } = value
            return (
              <div>
                {/* 用{}包裹JS逻辑，短路写法实现条件渲染 */}
                {cart.length > 0 ? (
                  <div>
                    <CartColumns />
                    <CartList />
                  </div>
                ) : (
                  <p>购物车暂无商品</p>
                )}
              </div>
            )
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}

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