使用map函數反應並將數據解析到子組件

Question

我正在爲一些反應基礎（主要是數據流和jsx語法）苦苦掙扎，對於noob問題感到抱歉。

我有兩個json，我正在Main.js中鏈接api調用，數據然後傳遞到SensorList.js。在這個組件中，我有一個呈現傳感器列表的函數，每個Sensor.js都將其鍵設置爲json中指定的id，並根據json中的數據設置其props。

目前我能夠抓住每個傳感器的第一個對應的數據片，並將其傳遞給相關的子組件。我需要將相應數據的整個數組傳遞給子組件Graph.js，目前我的map函數僅抓取每個數組中的第一個元素。

我的問題是我如何實際傳遞每個傳感器的值和時間數據的整個數組到它的子圖組件？

在此先感謝。

sensors.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

首先改變你的數據。取數據列表並將其變成傳感器ID到數據陣列的映射（這與反應無關，並且可能應該在最初處理AJAX響應時進行）。然後在您的sensors.map，只是通過sensorDataToId.get(sensor.id)

整形可能看起來像：

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)}/> 
    }); 
}; 

Answer 2

怎麼樣你遍歷一個列表並使用t他'找到'方法來查找其他屬性。

var renderSensors =() => { 
    return(
    sensors.map((sensor) => { 
     var dataItem = dataList.find((data)=>{ 
      return (data.sensorId === sensor.id) 
     }) 
    return(
     <Sensor key={dataItem.sensorId} name={sensor.name} value={dataItem.value} time={dataItem.time}/>)  
    }) 
) 
};