렌더링 된 구성 요소 방정식 값 비동기 업데이트

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> 
    ); 
    } 
}