Estoy aprendiendo a reaccionar. Y estoy tratando de setState el estado en la función componentDidMount() con un archivo externo que contiene una Array of Data , pero no está configurando el estado. Se muestra vacío cada vez que actualizo la página.

aplicación.js

 import './App.css'; import React from 'react'; import newData from './data.js'; class App extends React.Component { constructor(props) { super(props) this.state = { data : [] } } componentDidMount() { this.setState({data: newData}); console.log(this.state.data) } render(){ return ( <div>Hello</div> ) } }

datos.js

 const newData = [ { "id": 1, "name": "GoodName", }, ] export default newData

También lo intenté cambiando el formato de los datos y envolviéndolo en una Seed.function como

 window.Seed = (function() { const newData = [ { id: 1, name: 'GoodName', }, ]; return {newData: newData }; }());

Y traté de establecer el setState por

 this.setState({data: Seed.newData});

Pero dice, Seed is not defined .

• ¿Debería importar un archivo de matriz json externo en index.html en lugar de App.js ?

• ¿Debo usar la función de map o for of loop para iterar cada elemento en los datos antes de establecer el estado ?

Lo he intentado muchas veces pero sigue sin funcionar.

Cualquier ayuda sería muy apreciada. Gracias de antemano.