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

Question

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

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

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

失败的是，我在想，一旦我拥有传感器组件中的所有数据，我就可以根据传感器 key 解析相关数据，但我再次不确定如何执行此操作？

此外，我知道让 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