javascript - 在react中使用map函数并将数据解析到子组件

Question

我在一些 React 基础知识上遇到了一些困难，主要是数据流和 jsx 语法，对于菜鸟问题​​感到抱歉。

我在 Main.js 中对两个 json 进行链式 api 调用，然后将数据传递到 SensorList.js。在此组件中，我有一个渲染传感器列表的函数，每个 Sensor.js 将其键设置为 json 中指定的 id，并根据 json 中的数据设置其 props。

目前，我能够获取每个传感器的第一个相应数据并将其传递给相关的子组件。我需要将相应数据的整个数组传递给子 Graph.js 组件，目前我的 map 函数仅获取每个数组中的第一个元素。

我的问题是如何将每个传感器的值和时间数据的整个数组传递给它的子图组件？

提前致谢。

传感器.json

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

data.json 示例

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

SensorList.js

var SensorList = React.createClass({
  render: function() {
    var {data, sensors} = this.props;

    var renderSensors = () => {
      return sensors.map((sensor) => {
        return <Sensor key={sensor.id} name={sensor.name} value={data.get(sensor.id)}/>
        });
    };

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

Main.js

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
          });
        })
      axios
        .get("http://localhost:3000/data.json")
        .then(function(result) {
          var sensorDataToId = new Map();
          for(var i = 0; i < result.length; i++) {
            var datum = result[i];
            var sensorId = datum.sensorId;
            if (sensorDataToId.get(sensorId) === undefined) {
              sensorDataToId.set(sensorId, []);
            }

            sensorDataToId.get(sensorId).push(datum)
          }
          _this.setState({
            sensorsData: result.data
          });
        })
  },

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

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

    return (
      <div className="sensorList">
        <SensorList sensors={sensors} data={sensorsData}/>
      </div>
    );
  }
});

Answer 1

首先 reshape 您的数据。获取数据列表并将其转换为传感器 ID 到数据数组的映射(这与 React 无关，并且可能应该在最初处理 AJAX 响应的任何地方完成)；然后在您的 sensors.map 中，只需传递 sensorDataToId.get(sensor.id)

reshape 可能如下所示:

var sensorDataToId = new Map();
for(var i = 0; i < data.length; i++) {
  var datum = data[i];
  var sensorId = datum.sensorId;
  if (sensorDataToId.get(sensorId) === undefined) {
    sensorDataToId.set(sensorId, []);
  }

  sensorDataToId.get(sensorId).push(datum)
}

将 setState 调用更新为

_this.setState({sensorsData: sensorDataToId});

然后是你的sensors.map:

var renderSensors = () => {
  return sensors.map((sensor) => {
    return <Sensor key={sensor.id} name={sensor.name} value={data.get(sensor.id)}/>
  });
};