レンダリングされたコンポーネントを更新するProp Value Async

Question

私は財務データを持つリスト項目をいくつか作成していますが、react-sparklinesを使用して側面にミニグラフを表示したいとします。 データの取得に時間がかかることがあるので、配列をマッピングするときにグラフデータを取得しようとしていますが、プロップ値を正しく更新するグラフコンポーネントを取得できないようです。

データがフェッチから回収されたら、Sparklinesコンポーネントのプロップデータを更新する方法はありますか？

は、ここでは、そのような非同期関数からデータを返すことはできません私のコード

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

のサンプルです。代わりに、ロード要求が完了したら、コンポーネントをレンダリングするトリガーとなる状態にデータを設定します。以下のテストケースでは、データが準備できるまでプレースホルダをレンダリングすることに注意してください。

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

私は私自身のコンポーネントでこのコンポーネントをラップし、小道具などのデータを受け入れるだろう。
親コンポーネントでは、データが準備されている場合にのみリストをレンダリングし、各コンポーネントは各繰り返しで関連するデータを渡します。
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> 
    ); 
    } 
}