未捕获的类型错误：无法读取未定义的属性（读取“map”）

import React, { useState } from "react";

import products from '../products'


function RecScreen() {
  const [budget, setBudget] = useState(products);
  const [items, setParts] = useState([]);

  const handleInputChange = (event) => {
    setBudget(event.target.value);
  };

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

    const response = await fetch(`/api/products?price=${budget}`);
    const data = await response.json();

    setParts(data.product);
  };
  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>
        {items.map(product => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default RecScreen;

React 代码 在此代码中，用户输入预算并推荐 PC 部件，但它没有显示任何内容并给出此 未捕获的类型错误：无法读取未定义的属性（读取“map”）