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

Question

我对 React 还很陌生，正在尝试构建一个仪表板来显示来自三个不同传感器的数据。有关传感器的数据存储在一个 json 中（每个传感器都有一个 ID 和名称），此 json 使用 express 提供给客户端，然后使用 axios 将数据获取到我的 Main react 组件中。然后将此数据解析到 SensorList 中，用于创建每个 Sensor 组件，并使用提供的传感器 ID 为每个组件设置键。

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

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

如果我在传感器组件中拥有所有数据后，我想我可以根据传感器键解析相关数据，但我又不确定如何做到这一点？

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

第一个 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 的 props 和 state 的教程here