React项目Data.js的JSON数据导入App.js渲染卡片报错如何解决

问题根因 #

• 变量作用域问题：你在async自执行函数内部通过const data声明的变量属于函数块级作用域，函数外部无法访问，所以你导出的data本身就是未定义值。
• 异步时序问题：fetch请求是异步操作，就算你把data声明在函数外部，导出时请求还未返回，data仍然是初始空值，直接调用map方法必然报错。
• 路径匹配问题：你导出普通字符串仍报错，大概率是导入路径和实际文件路径不匹配，导致导入的Data为undefined。

解决方案 #

1. 改造Data.js #

封装请求为可导出的异步函数，移除前端不需要的node-fetch依赖（浏览器原生支持fetch）：

// Data.js
const loginPassword = '替换为你的实际认证凭证'
const url = '替换为你的实际接口地址'

export const fetchData = async () => {
  const options = {
    headers: {
      'Authorization': 'Basic ' + loginPassword
    }   
  };
  const response = await fetch(url, options);
  return await response.json();
}

2. 改造App.js #

使用useState存储数据、useEffect触发请求，增加加载状态和空值判断，避免渲染报错：

import React, { useState, useEffect } from "react";
import { Card, Button, Container, Row, Spinner } from "react-bootstrap";
import "./styles.css";
// 确认路径和实际文件位置匹配，若App.js和Data.js同目录则改为./Data
import { fetchData } from "./components/Data";

function createCard(item) {
  return (
    <Card style={{ width: "18rem" }} key={item.article}>
      <Card.Img variant="top" src="" />
      <Card.Body>
        <Card.Title>{item.name}</Card.Title>
        <Card.Text>Kod: {item.article} </Card.Text>
        {/* 可选链避免字段不存在时报错 */}
        <Button variant="primary">{item.salePrices?.[0]?.value / 100}AZN</Button>
      </Card.Body>
    </Card>
  );
}

export default function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getList = async () => {
      try {
        const res = await fetchData();
        // 若接口返回的数组在嵌套字段下，这里要替换为对应字段 比如res.data.list
        setData(res);
      } catch (err) {
        console.error('数据拉取失败:', err)
      } finally {
        setLoading(false)
      }
    }
    getList()
  }, [])

  // 加载态渲染
  if (loading) return <Spinner animation="border" className="mt-5 d-block mx-auto" />

  return (
    <div className="App">
      <Container>
        <Row className="justify-content-md-center">
          {data.length > 0 ? data.map(createCard) : <p className="text-center mt-5">暂无数据</p>}
        </Row>
      </Container>
    </div>
  );
}

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