提交后无产品显示：PC配件推荐系统React+Django代码排查求助

问题概述 #

用户输入预算提交后，页面无法显示符合条件的PC配件，以下是代码中的核心问题及修复方案：

React端问题与修复 #

1. 初始状态错误 #

budget的初始值被设为products数组，导致输入框初始值异常，提交时传递的参数格式错误。

2. 响应数据处理错误 #

Django返回的是直接的配件数组，而代码中尝试获取data.product，这会导致items始终为空。

3. 请求参数不匹配 #

React请求中使用了price作为参数名，但Django端接收的是budget，参数名不统一导致无法正确过滤数据。

修复后的React代码

import React, { useState } from "react";

function RecScreen() {
  // 初始化budget为数字0，items为空数组
  const [budget, setBudget] = useState(0);
  const [items, setParts] = useState([]);

  const handleInputChange = (event) => {
    // 转换为数字类型，确保参数格式正确
    setBudget(Number(event.target.value));
  };

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      // 统一参数名为budget，匹配Django端接收逻辑
      const response = await fetch(`/api/products?budget=${budget}`);
      // 直接使用返回的数组，而非不存在的data.product字段
      const data = await response.json();
      setParts(data);
    } catch (error) {
      console.error("请求出错:", error);
    }
  };

  return (
    <div>
      <h1>PC Parts Recommender</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Enter your budget:
          <input type="number" value={budget} onChange={handleInputChange} />
        </label>
        <button className='btn btn-warning rounded ms-1' type="submit">Recommend Parts</button>
      </form>
      <ul>
        {/* 原数据中无name字段，改用category显示 */}
        {items.map(product => (
          <li key={product.id}>{product.category} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default RecScreen;

Django端问题与修复 #

1. 代码缩进错误 #

budget = request.GET.get('budget')的缩进不正确，导致变量未在函数作用域内定义，引发运行错误。

2. 缺失itemgetter导入 #

使用sorted排序时未导入itemgetter，会触发NameError。

3. 未处理参数异常 #

未判断budget是否为空或非数字，可能导致int(budget)抛出ValueError，中断逻辑。

4. 数据拼写错误 #

processsor拼写错误，应修正为processor；power supply价格8000与其他配件数值差距过大，疑似单位错误，可按需调整。

修复后的Django代码

from django.http import JsonResponse
from django.views.decorators.http import require_GET
from operator import itemgetter  # 导入排序所需的itemgetter

@require_GET
def get_parts(request):
    budget = request.GET.get('budget')
    # 处理空参数或非数字参数的情况，返回空数组避免报错
    if not budget or not budget.isdigit():
        return JsonResponse([], safe=False)
    
    parts = [
        {'id': 2, 'category': 'power supply', 'price': 80},  # 修正价格单位（原8000疑似笔误）
        {'id': 3, 'category': 'gpu', 'price': 400},
        {'id': 4, 'category': 'mouse', 'price': 100},
        {'id': 5, 'category': 'case', 'price': 50},
        {'id': 8, 'category': 'ram', 'price': 80},
        {'id': 9, 'category': 'processor', 'price': 70},  # 修正拼写错误processsor→processor
    ]
    
    try:
        budget_int = int(budget)
        parts_within_budget = [part for part in parts if part['price'] <= budget_int]
        sorted_parts = sorted(parts_within_budget, key=itemgetter('price'))
        return JsonResponse(sorted_parts, safe=False)
    except ValueError:
        return JsonResponse([], safe=False)

额外验证步骤 #

1. 确认Django路由配置：在项目urls.py中添加path('api/products', views.get_parts)，确保请求能正确映射到视图函数。
2. 查看浏览器控制台：检查网络请求的URL、参数是否正确，是否有4xx/5xx错误。
3. 测试边界值：比如输入0、50、500等不同预算，验证返回数据是否符合预期。

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