Soy nuevo en React y estoy trabajando en un pequeño proyecto. Estoy tratando de averiguar por qué React no lee los datos de mi archivo dataArray.js. Aparece indefinido cuando lo consuelo. Me aseguré de que los datos se exportaran, los datos estuvieran conectados al archivo App.js y tengo los datos enumerados en el estado.
Estoy perplejo en cuanto a qué más probar.
import "./styles.css"; import { receiptsData } from "./dataArray"; import { Component } from "react"; import Receipt from "./components/Receipt"; class App extends Component { state = { receiptsData }; render() { console.log(receiptsData); return ( <div className="App"> <Receipt receipts={this.state.receiptsData} /> </div> ); } } export default App;Tengo una copia en condesandbox.io: https://codesandbox.io/s/korillaapp-0pm5y3
Sé que también recibo otros errores, pero creo que está relacionado con la imposibilidad de leer los datos del archivo dataArray.js.
Tiene una exportación predeterminada en dataArray.js y una importación con nombre en App.js
Entonces, o export const receiptsData = ... en dataArray.js , o impórtelo como import receiptsData from "./dataArray"; en App.js
Exportó su matriz como exportación predeterminada, por lo que debe importarse así:
import receiptsData from "./dataArray";O cambie su exportación así:
export const receipts = [...]1) Reemplace Receipt.js con el siguiente código
import ReceiptItem from "./ReceiptItem"; const Receipt = (props) => { const { receipts } = props; const receiptList = receipts.map((receipt, idx) => { return(<div> <ReceiptItem receipt={receipt} key={idx} /> </div>); }); return ( <div>{receiptList}</div> ) }; export default Receipt;2) Agregue la siguiente línea de código en la última en ReceiptItem.js
export default ReceiptItem;3) Tienes datos de recibos de exportación predeterminados de dataArray.js, así que usa recibosDatos con {} en App.js