>

각 별개의 주제에 대한 그래프 데이터를 표시하기 위해 다중 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를 사용하고 있습니다.


  • 답변 # 1

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

    현재 시나리오에 대한 상태 트리 및 업데이트 방법은 다음과 같습니다.

    <올>

    최상위 API를 요청하고 응답을 얻은 다음 그래프 데이터를 매핑하고 호출합니다. 와이즈 비즈

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

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

    예 :

    graphData: {}
    
    

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

    모든 반복에 동일한 방법 이것이 도움이되기를 바랍니다

    graphData: {<graph object for 1st iteration>}
    
    
    graphData: {<graph object for 2nd iteration>}

관련 자료

  • 이전 dji sdk - DJI Android SDK 카메라 프로파일
  • 다음 공식 도커 파이썬 이미지에 왜 GPG_KEY 환경 변수가 포함됩니까?