获取 React 状态（对象的对象（内部示例））并将对象数组获取到 map() 以进行组件渲染

Question

Given the below state of my App how can I convert it to an array of objects that I can map() to iterate over and render child components?

Project focus is to provide a front end UI for a greenhouse climate control system. Reactjs frontend.

    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]
    };
  }

Plan is to use allGreenhouses as id's then pull those id'd objects from state to create a new array of objects so that I can render then as Greenhouse component (using the id as key in the child components).

Expected result would be [{obj1Data},{obj2Data},{obj3Data}]. I hope this is concise enough, this is my first question.

Answer 1

You could use the Object#values() method for this. In your render method, access your state and pass greenhousesById to Object.values(). This returns the values of greenhousesById as an array which you can then call map() on to render each list item:

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

Hope this helps!

Answer 2

You could be use map() for your allGreenhouses

DEMO

 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]));