Reagiere JS, lade JSON-Daten und manipuliere es dann

Question

Begann mit react herumzuspielen, lernte gerade die kleinen Syntax-Sachen im Moment, ich steckte auf AJAX-Anfragen mit Datenanzeige.

Die Konsole gibt mir eine Fehlermeldung, dass die lokale Version von test.json nicht gefunden werden kann. Es ist im selben Verzeichnis wie die header.js

//header.js 
import React from 'react'; 
import $ from 'jquery'; 

var theData = []; 

var Header = React.createClass({ 
    getInitialState: function() { 
     return { 
     data: null 
     }; 
    }, 
    componentDidMount: function() { 
     $.ajax({ 
      dataType: 'json', 
      url: "./test.json", 
      success: function(data) { 
      theData.push(data); 
      console.log(theData); 
      } 
     }); 
    }, 
    render: function() { 
     return (
     <div> 
      <div id="theData" className="theData"></div> 
       {theData.someValue} 
      </div> 
     </div> 
     ); 
    } 
}); 

Answer 1

test.json im selben Verzeichnis sein könnte als header.js Datei, aber Ihr Code ausgeführt wird clientseitigen und den Client (Browser) hat keine Ahnung von dem, was test.json ist .

Stattdessen sollten Sie in Ihrer serverseitigen Logik einen Endpunkt definieren, um den Inhalt von test.json zu lesen und ihn als JSON-Objekt an den Client zurückzugeben. In Ihrer clientseitigen Logik sollte die URL-Eigenschaft in Ihrer aktuellen XHR durch die URI des Endpunkts ersetzt werden.

Seitennotiz: Ihre Komponente wird keine Daten anzeigen, nachdem das XHR abgeschlossen ist. theData wird ordnungsgemäß mutiert, aber es wird keinen Komponentenrender ausgelöst. Sie sollten stattdessen Ihren XHR-Antwort-JSON mit dem Komponentenstatus verknüpfen (den Sie ordnungsgemäß in getInitialState initialisiert haben), und React wird entsprechend neu rendern, wenn sein Wert geändert wird.

Aktualisieren Sie mit einem Codebeispiel, vorausgesetzt, Ihr Server ist Express.

Auf dem Server:

const fs = require('fs'); 
const app = ... 

app.get('/name-this-endpoint-appropriately', (req, res) => { 
    const json = fs.readFileSync('test.json', 'utf8'); 
    res.send(json); 
}); 

Auf dem Client (mit Korrekturen, wie in der Randnotiz oben erwähnt):

import React from 'react'; 
import $ from 'jquery'; 

var Header = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: [] 
     }; 
    }, 
    componentDidMount: function() { 
     $.ajax({ 
      dataType: 'json', 
      url: "/name-this-endpoint-appropriately", 
      success: (data) => this.setState({data}) 
     }); 
    }, 
    render: function() { 
     return (
     <div> 
      <div id="theData" className="theData"></div> 
       {this.state.data.someValue} 
      </div> 
     </div> 
     ); 
    } 
});