Question

我对React相当新，并尝试构建一个显示来自三个不同传感器的数据的仪表板。有关传感器的数据存储在一个json中（每个传感器都有一个ID和名称），这个json使用express提供给客户端，然后使用axios将数据输入到我的Main反应组件中。然后将此数据解析为SensorList，用于创建每个Sensor组件，并使用提供的传感器ID为每个组件设置密钥。

在一个单独的json中，我有从每个传感器返回的所有数据（sensorId，时间和值）。到目前为止，我已经到了一点，我在传感器组件中使用axios来获取json数据，目前它将每个传感器的所有数据提取到三个创建的组件中的每一个，然后将时间戳数据传递给LastReported组件和MaxValue组件的值数据。

使用当前的设置我正在寻找一种方法，只使用axios从json获取我需要的特定传感器的数据，但我不确定如何做到这一点？正如我所提到的，我已将Sensor组件键设置为第一个json中给出的传感器ID，但是如何告诉Sensor组件从第二个json获取相应的数据而不是每个传感器的所有数据？ / p>

我没想到，一旦我拥有传感器组件中的所有数据，我就可以根据传感器密钥解析相关数据，但我又不确定如何做到这一点？

我也知道让axios在组件中执行get请求并不是最好的主意，但这是一个练习自己掌握React的练习，因此我没有使用Redux或Flux。 / p>

首先是json ......

[
  {
    "id": "46c634d04cc2fb4a4ee0f1596c5330328130ff80",
    "name": "external"
  },
{
    "id": "d823cb4204c9715f5c811feaabeea45ce06736a0",
    "name": "office"
  },
{
    "id": "437b3687100bcb77959a5fb6d0351b41972b1173",
    "name": "common room"
  }
]

数据样本json ...

[
  {
    "sensorId": "437b3687100bcb77959a5fb6d0351b41972b1173",
    "time": 1472120033,
    "value": 25.3
  },
{
   "sensorId": "437b3687100bcb77959a5fb6d0351b41972b1173",
   "time": 1472119853,
   "value": 25.1
 },
{
  "sensorId": "437b3687100bcb77959a5fb6d0351b41972b1173",
  "time": 1472119673,
  "value": 25.1
},

...成分

var Main = React.createClass({
  getInitialState: function() {
    return {
      sensors: []
    };
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest =
      axios
        .get("http://localhost:3000/sensors.json")
        .then(function(result) {
          _this.setState({
            sensors: result.data
          });
        })
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    var {sensors} = this.state;

    return (
      <div>
        <SensorList sensors={sensors}/>
      </div>
    );
  }
});

var SensorList = React.createClass({
  render: function() {
    var {sensors} = this.props;
    var renderSensors = () => {
      return sensors.map((sensor) => {
        return (
          <Sensor key={sensor.id} {...sensor}/>
        );
      });
    };

    return (
      <div>
        {renderSensors()}
      </div>
    );
  }
});

var Sensor = React.createClass({
  getInitialState: function() {
    return {
      data: []
    };
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest =
      axios
        .get("http://localhost:3000/data.json")
        .then(function(result) {
          _this.setState({
            data: result.data
          });
        })
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    var {name} = this.props;
    var {data} = this.state;

    return (
      <div>
        {name}
        <LatestValue data={data}/>
        <LastReported data={data}/>
      </div>
    );
  }
});

Answer 1

好吧，现在你在Main.js和Sensor.js两次进行相同的api通话。 React中最常见的状态管理实践之一是在父组件中包含状态，然后将该状态传递给子组件。这样可以将状态保存在一个位置，并使调试更容易。

我会重写组件看起来像这样：

<强>被修改

var Main = React.createClass({
  getInitialState: function() {
    return {
      sensors: [],
      sensorsData: []
    };
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest =
      axios
        .get("http://localhost:3000/sensors.json")
        .then(function(result) {
          _this.setState({
            sensors: result.data
          });
        }) // chain api calls to obtain ALL data needed
        .get("http://localhost:3000/data.json")
        .then(function(result) {
          _this.setState({
            sensorsData: result.data
          });
        })
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    var {sensors, sensorsData} = this.state;

    return (
      <div>
        <SensorList sensors={sensors} dataList={sensorsData}/>
      </div>
    );
  }
});

var SensorList = React.createClass({
  render: function() {
    var {dataList, sensors} = this.props;
    var renderSensors = () => {
      return sensors.map((sensor) => {
        dataList.map((data) => {
           if (data.sensorId === sensor.id) {
            return (
             <Sensor key={data.sensorId} name={sensor.name} value={data.value} time={data.time}/>
           );
          }
        })    
      });
    };

    return (
      <div>
        {renderSensors()}
      </div>
    );
  }
});

var Sensor = React.createClass({
  render: function() {
    var {name, time, value} = this.props;

    return (
      <div>
        {name}
        <LatestValue value={value}/>
        <LastReported time={time}/>
      </div>
    );
  }
});

有一个关于React的道具和状态here

的精彩教程

处理和解析json数据到React组件

1 个答案: