React调用NodeJS后端数据报错：products.map不是函数的解决方法

错误原因分析 #

1. Axios响应处理错误：直接将Axios返回的完整响应对象赋值给products状态，但Axios响应是包含data、status等字段的对象，并非产品数组本身。
2. 数据源文件导出拼写错误：data.js中module. Exports存在空格，正确写法应为module.exports，会导致后端无法正常导入数据。
3. 后端返回数据结构冗余：后端返回嵌套两层的data.data.products结构，增加了前端解析复杂度。

具体修复步骤 #

1. 修复HomeScreen组件的Axios数据提取 #

修改useEffect中的数据处理逻辑，正确提取产品数组：

import React, { useState, useEffect } from 'react';
import axios from 'axios'
import Product from '../components/Product';

const HomeScreen = () => {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('/api/products');
      // 提取嵌套的products数组
      setProducts(response.data.data.products);
    };
    fetchData();
  }, [])
  return (
    <div className="row center">
            {
                products.map(product => (
                    <Product key={product._id} product={product} />
                ))
            }
    </div>
  )
}

export default HomeScreen

2. 修复data.js的导出拼写错误 #

将带空格的module. Exports改为正确写法：

const data = {
    products: [
        // 产品数据内容
    ]
}

// 修正拼写错误
module.exports = { data };

3. （可选推荐）简化后端返回结构 #

修改server.js接口，直接返回产品数组，减少前端解析层级：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const data = require('./data.js');

app.get('/api/products', (req, res) => {
    // 直接返回products数组
    res.send(data.data.products);
})
app.get('/', (req, res) => {
    res.send('Server is ready');
});

app.listen(port, () => {
    console.log(`The Server is running at port ${port}...`)
})

若采用此修改，前端的setProducts可简化为：

setProducts(response.data);

验证修复 #

重启后端和前端项目，检查HomeScreen组件是否正常渲染产品列表，控制台不再出现map is not a function错误。

内容的提问来源于stack exchange，提问作者coding beast