0

我尝试使用多个 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。

this.state.graphData 结果

4

1 回答 1

1

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

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

  1. 您确实调用了顶级 api 并获得响应，然后您进行映射并调用图形数据。graphData: {}

  2. 您取回了第一个图形数据并调用了 setState。graphData: {<graph object for 1st iteration>}. 在您获得第二次迭代之前，它也在进行中。

  3. 现在你得到了第二次迭代数据。（在这里你会得到问题）你做了 setState。graphData: {<graph object for 2nd iteration>}因此，在这里您将第一次迭代数据替换为下一次迭代数据，但这应该是一个数组，或者全部应该是不同的状态对象，因此您将数据推送到该对象中并保留旧的迭代图数据。

例子：

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

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

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

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>
  )
于 2018-06-08T02:19:40.573 回答