作出反应 - 如何正确的道具，从一个长期运行的操作

Question

传递给子组件我有一个简单的反应类...

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; 

的d3request和解析需要一点时间。我认为正在发生的事情是dataFinal变量没有被组件填满，因此没有任何东西被呈现。

对此的核心答案是什么？ 'ProbabilityGraph'将进一步处理数据，然后呈现一条线（它基于胜利图表）...可以很好地处理一些示例数据。

Answer 1

你需要尽快设置state与this.setState帮助下长时间操作后，你会调用这个方法就会迫使部分再次进行渲染，但现在你的状态就会有，你可以与this.state.XXX和通访问某些价值这对你的孩子来说，

最好在componentDidMount()内部进行这些操作，以免它阻挡组件的渲染。

将您的代码更改为以下代码即可使用。

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

您可以添加“dataReq”状态。然后在componentDidMount（）循环中获取你的数据，并更新你的“dataReq”状态。这将触发重新渲染。

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;