Aktualisieren gerenderten Komponenten Prop Wert Async

Question

Ich erstelle ein paar Listen Elemente mit finanziellen Daten und ich möchte eine Mini-Grafik auf der Seite mit react-sparklines anzeigen. Also ich versuche, die Diagrammdaten beim Mappen des Arrays abzurufen, da das Abrufen der Daten einige Zeit dauern kann, aber es scheint, dass ich die Graphkomponente nicht dazu bringen kann, den Propwert korrekt zu aktualisieren.

Wie kann ich die Prop-Daten in der Sparklines-Komponente aktualisieren, nachdem die Daten vom Abruf abgerufen wurden? Ist das möglich ?.

Hier ist eine Probe von meinem Code

class CurrencyList extends Component { 

    currencyGraph(symbol) { 
    return fetch(baseURL, { 
     method: 'POST', 
     headers: { 
      'Authorization': 'JWT ' + token || undefined, // will throw an error if no login 
     }, 
     body: JSON.stringify({'symbol': symbol}) 
    }) 
    .then(handleApiErrors) 
    .then(response => response.json()) 
    .then(function(res){ 
     if (res.status === "error") { 
      var error = new Error(res.message) 
      error.response = res.message 
      throw error 
     } 
     return res.graph_data 
    }) 
    .catch((error) => {throw error}) 
    } 

    render() { 
    topCurrencies.map((currency,i) => { 
     return (
     <ListItem key={i} button> 
      <Sparklines data={this.currencyGraph(currency.symbol)} > 
      <SparklinesLine style={{ stroke: "white", fill: "none" }} /> 
      </Sparklines> 
      <ListItemText primary={currency.symbol} /> 
     </ListItem> 
     ) 
    }) 
    } 
} 

Answer 1

Sie können nicht zurückkehren Daten von einer asynchronen Funktion ähnlich. Wenn Ihre Ladeanforderung abgeschlossen ist, legen Sie die Daten stattdessen in dem Zustand fest, in dem die Komponente gerendert wird. Beachten Sie, dass im folgenden Testfall ein Platzhalter gerendert wird, bis die Daten bereit sind.

Item = props => <div>{props.name}</div>; 

class Test extends React.Component { 
    state = { 
    data: '' 
    } 

    componentDidMount() { 
    // Simulate a remote call 
    setTimeout(() => { 
     this.setState({ 
      data: 'Hi there' 
     }); 
    }, 1000); 
    } 

    render() { 
    const { data } = this.state; 
    return data ? <Item name={this.state.data} /> : <div>Not ready yet</div>; 
    } 
} 

ReactDOM.render(
    <Test />, 
    document.getElementById('container') 
); 

Fiddle

Answer 2

Ich würde diese Komponente mit meiner eigenen Komponente wickeln und die Daten als Requisiten akzeptieren.
In der Elternkomponente rendere ich die Liste nur, wenn ich die Daten bereit habe und übergebe jeder Komponente die relevanten Daten bei jeder Iteration.
Here is a running small example

const list = [ 
    { 
    key: 1, 
    data: [5, 10, 5, 20] 
    }, 
    { 
    key: 2, 
    data: [15, 20, 5, 50] 
    }, 
    { 
    key: 3, 
    data: [1, 3, 5, 8] 
    } 
]; 

class MySparklines extends React.Component { 

    render() { 
    const { data } = this.props; 
    return (
     <Sparklines data={data} limit={5} height={20}> 
     <SparklinesLine style={{ fill: "#41c3f9" }} /> 
     </Sparklines> 
    ); 
    } 
} 

class App extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     dataList: [] 
    } 
    } 

    componentDidMount() { 
    setTimeout(() => { 
     this.setState({ dataList: list }); 
    }, 1500); 
    } 

    renderCharts =() => { 
    const { dataList } = this.state; 
    return dataList.map((d) => { 
     return(
     <MySparklines key={d.key} data={d.data} /> 
    ); 
    }) 
    } 

    render() { 
    const { dataList } = this.state; 
    return (
     <div> 
     { 
     dataList.length > 0 ? 
     this.renderCharts() : 
     <div>Loading...</div> 
     } 
     </div> 
    ); 
    } 
}