홈>
각 별개의 주제에 대한 그래프 데이터를 표시하기 위해 다중 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
관련 자료
- mysql - PHP를 사용하여 동일한 열에 저장된 여러 URL을 표시하는 방법은 무엇입니까?
- ruby - 풋을 사용하여 여러 항목을 표시하는 방법은 무엇입니까?
- azure active directory - Graph API를 사용하여 C #에서 Teams 조직 계층 데이터를 가져 오는 방법
- 동적 ID 선택기를 사용하여 각도 v10에서 동적 구성 요소 표시
- reactjs - Reactjs의 데이터베이스에서 가져온 이미지 경로를 사용하여 이미지를 표시하는 방법
- C #을 사용한 사용자 입력 후 Python 출력을 C #에 표시
- c# - Windows Forms를 사용하여 Html 파일을 표시하려면 어떻게합니까?
- android - rxJava를 사용하여 AWS 서버에 여러 이미지 업로드
- python - 여러 if 문을 사용하여 함수의 복잡성을 줄이는 방법
- python - 내 Discordpy 봇이 포함 된 여러 서버가있는 별도의 포함에서 사용되는 서버를 나열하는 방법 대신 메시지 당 하나씩 전송
- Union-Find 데이터 구조를 사용하여 유 방향 그래프에서주기를 감지 할 수 있습니까?
- wordpress - 단일 사용자 지정 게시물 유형 페이지에 여러 사용자 지정 분류 값을 표시 하시겠습니까?
- amazon web services - AWS CLI를 사용하여 여러 AWS 스냅 샷을 대량 삭제하는 방법은 무엇입니까?
- firebase - Flutter에서 여러 이미지를 표시하고 업데이트하는 방법
- c - gcc 컴파일러 최적화 - 문자 여러 번 사용
- python - pandasDataFrameplot ()을 사용할 때 모든 xtick를 표시하는 방법은 무엇입니까?
- linux - 단일 명령에 여러 별칭 사용
- 여러 독립적 인 if 절에 대해 레일의 Ruby에서 guard 절 사용
- html - R을 사용하여 웹 페이지에서 여러 테이블을 검색하는 방법
- javascript - reactJS를 사용하여 동적 배열 목록 표시
관련 질문
- reactjs - POST HTTP 409 충돌
- reactjs - 내 API의 데이터가 React의 chartjs 차트에 표시되지 않는 이유는 무엇입니까?
- reactjs - 소비 된 API 응답을 다른 구성 요소로 보내는 방법은 무엇입니까?
- reactjs - baseUrl을 사용하여 axioscreate 메소드 사용시 axiosget 오류
- reactjs - typeerror - patientmap은 함수가 아닙니다 react js
- reactjs - React에서 새로 고침 후 'isAuthenticated'상태 유지
- javascript - React 앱이 성공적으로 컴파일되고 작동하지만 브라우저에서 페이지를 다시로드 한 후 TypeError가 발생합니다 varfilter is not a function
- axios - reactjs의 데이터베이스에서 2020 년 12 월 14 일의 날짜 객체를 변환하는 방법
- reactjs - 레시피가 게시되지만 저장되지 않음
- axios - ReactJS 상태 업데이트 한 단계 뒤
모든 그래프에 대해 동일한 상태를 사용하기 때문입니다.
현재 시나리오에 대한 상태 트리 및 업데이트 방법은 다음과 같습니다.
<올>최상위 API를 요청하고 응답을 얻은 다음 그래프 데이터를 매핑하고 호출합니다. 와이즈 비즈
첫 번째 그래프 데이터를 받고 setState를 호출했습니다. 와이즈 비즈 . 이 두 번째 반복을 진행하기 전에도 진행되었습니다.
이제 두 번째 반복 데이터를 다시 얻습니다. (여기서 얻을 수있는 문제) setState를 수행하십시오. 와이즈 비즈 그래서 여기에서 첫 번째 반복 데이터를 다음 반복 데이터로 대체하지만 이것은배열이거나 모두다른 통계e 객체 여야하므로 데이터를 푸시하고 이전 데이터를 보존합니다 반복 그래프 데이터.
예 :
렌더링에서는 graphData를 통해 매핑하고 그래프 구성 요소를 반환해야합니다.
모든 반복에 동일한 방법 이것이 도움이되기를 바랍니다
graphData: {<graph object for 2nd iteration>}