javascript - React - 如何从长时间运行的操作将正确的 prop 传递给子组件

Question

我有一个简单的 react 类...

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;

d3请求和解析需要一些时间。我认为正在发生的事情是，在 React 初始化组件时 dataFinal 变量尚未填充，因此没有渲染任何内容。

这个问题的正确答案是什么？ “ProbabilityGraph”将进一步处理数据，然后渲染一条线(它基于胜利图)...与一些示例数据配合得很好。

Answer 1

长时间操作后，您需要在 this.setState 的帮助下设置state，一旦调用此方法，它将强制组件再次渲染，但是现在您的州将具有一些值，您可以使用 this.state.XXX 访问该值并将其传递给您的 child ，

最好在 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;