React调用Node后端接口时出现TypeError: Cannot read 'map' of undefined错误

使用React前端从Node.js后端获取数据，后端API测试正常，但页面报错：TypeError: Cannot read properties of undefined (reading 'map')。相关代码如下：

const SingleProductPage = () => {

  const { productId } = useParams();

  const [product, setProduct] = useState({});

  useEffect(() => {
    const fetchProduct = async () => {
      const { data } = await axios.get(`/api/Product/${productId}`);
      setProduct(data);
    };
    fetchProduct();
  }, [productId]);

  if (!product) {
    return <Error errorMessage="Sorry, Product not found!" />;
  }


  return (
        <div className="single-slider-div">
          <Splide>
            {product.src.map((src, index) => (
              <SplideSlide>
                <img key={index} src={src} alt="product img" />
              </SplideSlide>
            ))}
          </Splide>
        </div>
      
  );
};

export default SingleProductPage;

用户尝试将product初始状态设为对象，仍出现相同错误，且已确认后端路由正常。

解决方案 #

错误原因分析 #

• 初始状态product是{}，此时product.src为undefined，直接调用map会触发报错。
• if (!product)的判断无效，因为空对象{}在JavaScript中是真值，不会进入这个分支，无法处理加载过程中的状态。

具体修复步骤 #

1. 初始化时给src设置空数组
   把useState({})改为useState({ src: [] })，确保初始状态下product.src是数组，调用map不会报错。

2. 优化加载状态判断
   可以检查product.src是否存在，或者使用可选链操作符?.来安全访问：

   {product.src?.map((src, index) => (...))}
   

   或者在渲染前增加加载状态的判断：

   if (!product.src) {
     return <div>Loading...</div>;
   }
   

3. 增加异常处理
   在fetchProduct中加入try/catch，处理请求失败的情况：

   const fetchProduct = async () => {
     try {
       const { data } = await axios.get(`/api/Product/${productId}`);
       setProduct(data);
     } catch (err) {
       console.error('获取产品失败:', err);
       // 可以设置错误状态，展示错误提示
     }
   };
   

修改后的完整代码示例 #

const SingleProductPage = () => {

  const { productId } = useParams();

  // 初始化src为空数组
  const [product, setProduct] = useState({ src: [] });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        setLoading(true);
        const { data } = await axios.get(`/api/Product/${productId}`);
        setProduct(data);
        setError(null);
      } catch (err) {
        console.error('请求失败:', err);
        setError('Sorry, Product not found!');
      } finally {
        setLoading(false);
      }
    };
    fetchProduct();
  }, [productId]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <Error errorMessage={error} />;
  }

  return (
        <div className="single-slider-div">
          <Splide>
            {product.src.map((src, index) => (
              <SplideSlide key={index}>
                <img src={src} alt="product img" />
              </SplideSlide>
            ))}
          </Splide>
        </div>
      
  );
};

export default SingleProductPage;

内容的提问来源于stack exchange，提问作者0xbillz