采用React State(对象中的对象(内部示例))并获取一个对象数组以映射()进行组件渲染

Question

给定我的应用程序的以下状态，我如何将其转换为一个对象数组，我可以映射((来迭代和渲染子组件？

项目重点是为温室气候控制系统提供前端UI。Reactjs前端。

this.state = {
greenhousesById: {
0: {
name: "Mercury",
temperature: 72,
humidity: 60,
fans: [0],
heater: [0]
},
1: {
name: "Venus",
temperature: 72,
humidity: 60,
fans: [1],
heater: [1]
},
2: {
name: "Earth",
temperature: 72,
humidity: 60,
fans: [2],
heater: [2]
}
},
allGreenhouses: [0, 1, 2]
};
}

计划是使用allGreenhouse作为id，然后从状态中提取那些id对象来创建一个新的对象数组，这样我就可以将其渲染为Greenhouse组件(使用id作为子组件中的键(。

预期结果为[｛obj1Data｝、｛obj2Data｝、｝obj3Data｝]。我希望这足够简洁，这是我的第一个问题。

Answer 1

您可以将map()用于allGreenhouses

演示

var state = {
greenhousesById: {
0: {
name: "Mercury",
temperature: 72,
humidity: 60,
fans: [0],
heater: [0]
},
1: {
name: "Venus",
temperature: 72,
humidity: 60,
fans: [1],
heater: [1]
},
2: {
name: "Earth",
temperature: 72,
humidity: 60,
fans: [2],
heater: [2]
}
},
allGreenhouses: [0, 1, 2]
};
console.log(state.allGreenhouses.map(v=>state.greenhousesById[v]));

Answer 2

对此可以使用Object#values()方法。在您的render方法中，访问您的状态并将greenhousesById传递给Object.values((。这将以数组的形式返回greenhousesById的值，然后您可以调用map()来渲染每个列表项：

// Your component state
var state = {
greenhousesById: {
0: {
name: "Mercury",
temperature: 72,
humidity: 60,
fans: [0],
heater: [0]
},
1: {
name: "Venus",
temperature: 72,
humidity: 60,
fans: [1],
heater: [1]
},
2: {
name: "Earth",
temperature: 72,
humidity: 60,
fans: [2],
heater: [2]
}
},
allGreenhouses: [0, 1, 2]
};

// In your render method, access your state and pass greenhousesById
// to Object.values(). Call map() to render each value as list item.
var result = Object.values(state.greenhousesById);
console.log(result);

希望这能有所帮助！