獲取 React 狀態（對象的對象（內部示例））並將對象數組獲取到 map() 以進行組件渲染

Question

鑒於我的應用程序的以下狀態，我如何將其轉換為我可以 map() 迭代並呈現子組件的對象數組？

項目重點是為溫室氣候控制系統提供前端 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]
    };
  }

計划是使用 allGreenhouses 作為 id，然后從 state 中提取那些 id 的對象以創建一個新的對象數組，以便我可以將其渲染為 Greenhouse 組件（使用 id 作為子組件中的鍵）。

預期結果為 [{obj1Data},{obj2Data},{obj3Data}]。 我希望這足夠簡潔，這是我的第一個問題。

Answer 1

您可以為此使用Object#values()方法。 在您的渲染方法中，訪問您的狀態並將greenhousesById ById 傳遞給 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);

希望這可以幫助！

Answer 2

你可以為你的allGreenhouses使用map()

演示

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