如何使用 React 的多个 axios 请求显示单独的图形？

Question

我已经尝试使用多个 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"的结果在这里显示了每个不同主题的数据，但是图表显示都是一样的，我想为每个设备的图表显示每个图表数据，我可以知道如何用它做什么？谢谢你。该图表正在使用 Victory Chart，它正在使用 React。

Answer 1

那是因为您对所有图形使用相同的状态。

这就是当前场景的状态树和更新：

您调用顶级 api 并获得响应，然后您进行映射并调用图形数据。 graphData: {}
您取回了第一个图形数据并调用了 setState。 graphData: {<graph object for 1st iteration>}。在你得到这个之前，第二次迭代也在进行中。
现在你得到了第二次迭代数据。（这里问题你会得到）你做 setState。 graphData: {<graph object for 2nd iteration>} 所以在这里您要将第一次迭代数据替换为下一次迭代数据，但这应该是一个 array 或者所有应该是 different state对象，以便将数据推送到其中并保留旧的迭代图数据。

示例：

Initial state -> graphData: []
1st iteration -> graphData: this.state.graphData.concat(res.data).

并且在渲染中，您必须通过 graphData 和 return 图形组件进行映射。

所有迭代的方式相同我希望这可能有所帮助

state = {
  graphData: []
}

componentDidMount() {
  axios.get(`http://192.168.10.124:3000/api/messages/gettopic`) 
    .then(res => {
      res.data.map(topic => {
        axios.get('http://192.168.10.124:3000/api/messages?filter[where][topic]=' + topic + "&filter[order]=timestamp%20DESC")
        .then(res => {
          this.setState({graphData: this.state.graphData.concat({topic: topic, data: res.data})});
        })
      });
    })
  }

  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.state.graphData.length && this.state.graphData.map((item, index) =>
              <div className="columns is-multiline" key={index}>
                <div className="column is-12">
                  <div className="panel">
                    <div className="panel-block">
                      <li>
                        <a onClick={memobind(this, 'handleRowClick', item)}>
                          <span>{item.topic}</span>
                          <GetChart graphData={item.data}/>
                        </a>
                      </li>
                    </div>
                  </div>
                </div>
              </div>  
            )
          }
        </div>
      </div>
    </div>
  )

如何使用 React 的多个 axios 请求显示单独的图形？

How to display the separate graph using multiple axios request with React?

reactjs

axios

victory-charts