将 JSON 数据导入 App.js 时出现问题

Posted 2023-03-14

【中文标题】将 JSON 数据导入 App.js 时出现问题

【英文标题】：Trouble while importing JSON Data to App.js

【发布时间】：2021-12-05 04:48:48

【问题描述】：

我必须将 JSON 数据从 Data.js 传递到 App.js。如果我 console.log Data.js 中的数据一切正常，但是当我尝试将其传递给卡片使用时，它会显示此 错误。

App.js

import React from "react";
import  Card, Button, Container, Row  from "react-bootstrap";
import "./styles.css";
import Data from "./components/Data";

function createCard(item) 
  return (
    <Card style= width: "18rem" >
      <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 / 100AZN</Button>
      </Card.Body>
    </Card>
  );


export default function App() 
  return (
    <div className="App">
      <Container>
        <Row className="justify-content-md-center">Data.map(createCard)</Row>
      </Container>
    </div>
  );

Data.js

import fetch from 'node-fetch';
var options = 
    headers: 
       'Authorization': 'Basic ' + loginPassword
       
 ;

 (async () => 
   const response = await fetch(url, options);
   const data = await response.json(); 

)();
 
export default data;

P.S.我认为两个时刻可以帮助解决这个问题。

首先是当我尝试 console.log 异步函数之外的数据时它不起作用，这意味着我只能在该异步函数内部达到该值。

第二时刻是当我将const test = "1"; 添加到data.js 并尝试将export default test; 传递给App.js 时，它也会显示与我之前提到的相同的错误。

提前致谢

【问题讨论】：

我不确定，但请您检查拼写，因为您导出 data 并导入 Data javascript 区分大小写

@DevChaudhary 这是默认导出，所以没关系

你能试试这个方法吗 - 使用useState 存储数据和useEffect 获取数据...这是在 React 中获取数据的首选方式

感谢您的回复。我已经通过使用大写字母对所有“数据”单词进行了检查，没有任何变化。我认为这个问题应该比一个简单的错字更深一些。

无论如何它都不起作用，因为data 的作用域是异步函数。

【参考方案1】：

这是因为尚未在文件中提取数据并且您已将其导出。你甚至不需要 data.js。在您的 app.js 中尝试此代码

import React,  useState, useEffect  from "react";
import  Card, Button, Container, Row  from "react-bootstrap";
import fetch from "node-fetch";

function createCard(item) 
  return (
    <Card style= width: "18rem" >
      <Card.Img variant="top" src="" />
      <Card.Body>
        <Card.Title>item.id</Card.Title>
        <Card.Text>Kod: item.title </Card.Text>
        <Button variant="primary">item.salePrices[0].value / 100AZN</Button>
      </Card.Body>
    </Card>
  );


export default function App() 
  const [data, setData] = useState(null);

  const getData = async () => 
    const response = await fetch(url, options);
    const Data = await response.json();
    setData(Data);
  ;

  useEffect(() => 
    getData();
  , []);
  return (
    <div className="App">
      <Container>
        <Row className="justify-content-md-center">
          data && data.map(createCard)
        </Row>
      </Container>
    </div>
  );

这里的 getData 是你对 data.js 的异步调用。如果您希望代码中的模块化并希望在另一个文件中进行异步调用，那么您需要从 data.js 文件而不是 data 导入 promise 并在 app.js 文件中解析它。