React - comment passer l'hélice correcte à un composant enfant d'une opération longue course

Question

J'ai une simple classe ... réagir

import React, { Component } from 'react'; 
import './App.css'; 
import ProbabilityGraph from './GraphComponent/ProbabilityGraph' 
import * as d3dsv from "d3-dsv"; 
import * as d3request from "d3-request";  
class App extends Component { 
    render() { 

    const url = 'http://xxx.x.x.x:xxxx/someCSV.csv'; 

    const dataReq = d3request.request(url).get(function(error, data){ 
     // console.log(data); 
     const dataFinal = d3dsv.csvParse(data.responseText) 
     return dataFinal  
      // console.log(dataFinal) 
    }); 


    return (
    <div style={{textAlign:"center"}}> 
     <h1> Maybe Do Something </h1> 

     <ProbabilityGraph data={dataReq}/> 

     </div> 
    ); 
    } 
} 

export default App; 

Le d3request et parse prend un peu de temps. Ce que je pense est en train de se produire, c'est que la variable dataFinal n'a pas été remplie au moment où elle réagit initialise le composant, donc rien n'est rendu.

Quelle est la réponse corect à cela? Le 'ProbabilityGraph' traitera les données un peu plus loin, puis rendra une ligne (basée sur les graphiques de victoire) ... fonctionne bien avec quelques exemples de données.

Answer 1

Vous devez régler la state après une longue opération avec l'aide de this.setState dès que vous appelez cette méthode, il forcera le composant à rendre à nouveau, mais votre état aura une certaine valeur que vous pouvez accéder à this.state.XXX et laissez-passer ceci à vos enfants,

Il est préférable de faire ce genre d'opérations à l'intérieur du componentDidMount() afin qu'il ne bloque pas le rendu du composant. Changez votre code à ci-dessous travaillera pour vous.

import React, { Component } from 'react'; 
import './App.css'; 
import ProbabilityGraph from './GraphComponent/ProbabilityGraph' 
import * as d3dsv from "d3-dsv"; 
import * as d3request from "d3-request";  
class App extends Component { 
    constructor(){ 
     this.state = { 
      dataReq: {} 
     }; 
    } 
    componentDidMount(){ 
     const url = 'http://xxx.x.x.x:xxxx/someCSV.csv'; 

     d3request.request(url).get(function(error, data){ 
      const dataFinal = d3dsv.csvParse(data.responseText) 
      this.setState({dataReq: dataFinal}); 

     }); 
    } 
    render() { 
    return (
    <div style={{textAlign:"center"}}> 
     <h1> Maybe Do Something </h1> 

     { dataReq && <ProbabilityGraph data={this.state.dataReq}/> } 

     </div> 
    ); 
    } 
} 

export default App; 

Answer 2

Vous pouvez ajouter un état "dataReq". Ensuite, dans le cycle componentDidMount(), récupérez vos données et mettez à jour votre état "dataReq". Cela va déclencher un rendu.

import React, { Component } from 'react'; 
import './App.css'; 
import ProbabilityGraph from './GraphComponent/ProbabilityGraph' 
import * as d3dsv from "d3-dsv"; 
import * as d3request from "d3-request"; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     dataReq = {} 
    } 
    } 

    componentDidMount() { 
    const url = 'http://xxx.x.x.x:xxxx/someCSV.csv'; 

    d3request.request(url).get(function(error, data){ 
     const dataFinal = d3dsv.csvParse(data.responseText) 

     this.setState({dataReq: dataFinal}) 
    }); 
    } 

    render() { 
    return (
     <div style={{textAlign:"center"}}> 
     <h1> Maybe Do Something </h1> 
     <ProbabilityGraph data={this.state.dataReq}/> 
     </div> 
    ); 
    } 
} 

export default App;