ReactJS报错：Uncaught TypeError: Cannot read properties of undefined (reading 'map')

错误原因 #

Uncaught TypeError: Cannot read properties of undefined (reading 'map') 是因为items被设置为undefined后调用了map方法。当接口返回数据中data.product不存在或为undefined时，setParts(data.product)会将items变为undefined，触发类型错误。

具体修复步骤 #

1. 修正budget的初始状态 #

原代码将budget初始值设为products数组，但输入框是数字类型，会导致初始显示异常和后续传参错误，改为数字初始值：

const [budget, setBudget] = useState(0);

2. 处理输入值的类型转换 #

输入框的value默认是字符串，直接赋值会导致请求参数类型错误，需转为数字：

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

3. 确保items始终为数组类型 #

当接口返回的data.product不存在时，设置空数组避免undefined：

setParts(data.product || []);

注意：请确认接口返回的字段名是否正确，若接口返回的是复数形式products，需改为：

setParts(data.products || []);

4. 可选优化：添加加载状态 #

异步请求过程中添加加载提示，提升用户体验：

const [loading, setLoading] = useState(false);

const handleSubmit = async (event) => {
  event.preventDefault();
  setLoading(true);
  try {
    const response = await fetch(`/api/products?price=${budget}`);
    const data = await response.json();
    setParts(data.product || []);
  } catch (error) {
    console.error('请求出错:', error);
    setParts([]);
  } finally {
    setLoading(false);
  }
};

在JSX中添加加载提示：

{loading ? <p>加载中...</p> : (
  <ul>
    {items.map(product => (
      <li key={product.id}>{product.name} - ${product.price}</li>
    ))}
  </ul>
)}

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