홈>2020-02-01 00:34

reactjs - React와 함께 여러 개의 axios 요청을 사용하여 별도의 그래프를 표시하는 방법은 무엇입니까?

각 별개의 주제에 대한 그래프 데이터를 표시하기 위해 다중 axios 요청을 사용해 보았지만 결과는 그래프 표시가 모두 아래 스크린 샷과 같이 같았습니다. 마지막 데이터에 대해서만 표시됩니다. 코딩 :

componentDidMount() {
axios.get(`http://192.168.10.124:3000/api/messages/gettopic`) 
  .then(res => {
    const graphDataName = res.data.map(topics=>{
      axios.get('http://192.168.10.124:3000/api/messages?filter[where][topic]=' + topics + "&filter[order]=timestamp%20DESC")
      .then(res => {
        const graphData = res.data;
        this.setState({graphData});
      })
    });
  })
}
render() {
const { getDeviceListPending, getDeviceListError } = this.props.dashboard;
//const { getDevicePending, getDeviceError } = this.props.dashboard;
//const temperatureData = this.getTempData();
console.log(this.state.graphData);
//console.log(this.state.topics);
return (
  <div className="chart">
    <div className="column">
      <div className="panel">
        {
          this.props.dashboard.listData.map(item=>
            <div className="columns is-multiline">
              <div className="column is-12">
                <div className="panel">
                  <div className="panel-block">
                    <li key={item}>
                      <a key={item} onClick={memobind(this, 'handleRowClick', item)}>
                        {item}
                          <GetChart graphData={this.state.graphData}/>
                      </a>
                    </li>
                  </div>
                </div>
              </div>
            </div>  
          )
        }
      </div>
    </div>
  </div>

"this.state.graphData"의 결과는 여기에 각 개별 주제에 대한 데이터를 보여 주었지만, 그래프 표시는 모두 동일합니다. 각 장치의 그래프에 대한 각 그래프 데이터를 표시하고 싶습니다. 그것으로합니까? 감사합니다. 차트에서 승리 차트를 사용하고 있으며 React를 사용하고 있습니다.

reactjsaxiosvictory-charts

답변 # 1
모든 그래프에 대해 동일한 상태를 사용하기 때문입니다.

현재 시나리오에 대한 상태 트리 및 업데이트 방법은 다음과 같습니다.
<올>
최상위 API를 요청하고 응답을 얻은 다음 그래프 데이터를 매핑하고 호출합니다. 와이즈 비즈

첫 번째 그래프 데이터를 받고 setState를 호출했습니다. 와이즈 비즈 . 이 두 번째 반복을 진행하기 전에도 진행되었습니다.

이제 두 번째 반복 데이터를 다시 얻습니다. (여기서 얻을 수있는 문제) setState를 수행하십시오. 와이즈 비즈 그래서 여기에서 첫 번째 반복 데이터를 다음 반복 데이터로 대체하지만 이것은배열이거나 모두다른 통계e 객체 여야하므로 데이터를 푸시하고 이전 데이터를 보존합니다 반복 그래프 데이터.

예 :
```
graphData: {}
```
렌더링에서는 graphData를 통해 매핑하고 그래프 구성 요소를 반환해야합니다.

모든 반복에 동일한 방법 이것이 도움이되기를 바랍니다
```
graphData: {<graph object for 1st iteration>}
```
graphData: {<graph object for 2nd iteration>}

Python2.net

reactjs - React와 함께 여러 개의 axios 요청을 사용하여 별도의 그래프를 표시하는 방법은 무엇입니까?

관련 자료