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

计划是使用allGreenhouses作为id，然后从状态中拉出那些id已标识的对象，以创建一个新的对象数组，这样我就可以将其渲染为Greenhouse组件（使用id作为子组件中的键）。

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

Answer 1

您可以使用Object#values()方法。在渲染方法中，访问您的状态并将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);

希望这会有所帮助！

Answer 2

您可能将if body in for_yes: response elif body in for_no: response用于map()

演示

allGreenhouses

获取React State（对象的对象（内部示例））并将对象的数组获取到map（）进行组件渲染

2 个答案: