0
131
ViewsProblemas al importar datos JSON a App.js
Tengo que pasar datos JSON de Data.js a App.js. Si consuelo. registro datos en Data.js console.log todo está bien, sin embargo, cuando trato de pasarlo para usarlo en tarjetas, me muestra este error .
Aplicación.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 / 100}AZN</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> ); }Datos.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;PS Dos momentos que en mi opinión pueden ayudar a resolver este problema.
Primero , cuando intento consolar. registrar datos fuera de la función asíncrona, no funciona, lo que significa que solo puedo alcanzar el valor dentro de esa función asíncrona.
El segundo momento es cuando agrego const test = "1"; a data.js e intente pasar export default test; a App.js también muestra el mismo error que mencioné antes.
Gracias por adelantado
1 answers
Answer question0
Esto se debe a que los datos aún no se han obtenido en el archivo y usted los exportó. Ni siquiera necesita data.js. Prueba este código en tu 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 / 100}AZN</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> ); }Aquí getData es su llamada asíncrona de data.js. Si desea modularidad en su código y quiere esa llamada asíncrona en otro archivo, entonces necesita importar la promesa del archivo data.js en lugar de los datos y resolverla en el archivo app.js.