Question

我已经创建了动态的Room组件，这些组件是基于Redux分配的room对象创建的。

{
    rooms && rooms.map((room, index) => {
        const { name, temperature, humidity, timestamp } = room

        return (
            <Col key={index} xs={12} md={6}>
                <Room 
                    index={index}
                    name={name} 
                    temperature={temperature} 
                    humidity={humidity}
                />
            </Col>
        )
    })
}

每个房间的细节都已正确安装。我创建一个函数来维护数组中的10个对象。但是，将数组传递到Rechart时，似乎我的组件正在同一状态上进行更新。

class Room extends Component {
    linechart = () => {
        const { timestamp, temperature, humidity, name } = this.props
        const { chartData } = this.state

        if(chartData.length > 9) chartData.shift()
        chartData.push({
            name, 
            timestamp: moment(timestamp).format('mm:ss'), 
            temperature, 
            humidity})
    }
}

如您所见，组件详细信息正确显示。但是，chartData的值尽管是唯一的组件，却以相同的状态存储。

我以1秒的间隔运行该函数，日志显示状态以0.5秒的间隔进行更新。这意味着两个<Room/>组件都使用相同的<LineChart/>组件。有谁知道如何克服这个问题？

Answer 1

为了更新array中的项目，我建议使用spread syntax。扩展语法通过浅表复制数组来工作，该数组保留对原始数组的引用，但允许您覆盖存储在其中的任何data types。这样可以使数组保持不变。

我不确定您从哪里获取数据，但是由于您有数量有限的rooms，因此该数组的结构应该已经像这样：

data: [
   { 
     name: "Room1", 
     humidity: 11,
     tempature: 30, 
     timestamp: "Sat May 25 2019 22:23:06 GMT-0700",
   },
   { 
     name: "Room2", 
     humidity: 11,
     tempature: 25, 
     timestamp: "Sat May 25 2019 22:23:06 GMT-0700",
   },
   ...etc
]

然后，您可以将其简单地存储到state，并在需要时map遍历数组，并使用传入数据更新其属性。但是，这假定传入数据包含所有rooms。如果您只需要更新room数组中的特定rooms，则可以将id（或唯一标识它的内容）与传入的新数据id进行比较。

例如，一个新的更新进来了，但是仅更新了Room1，那么我们可以做类似的事情。

传入数据

data: [
  { 
    name: "Room1", 
    humidity: 11,
    tempature: 30, 
    timestamp: "Sat May 25 2019 22:23:06 GMT-0700",
   }
];

作为“房间”存储在state中的当前数据

 this.setState(prevState => ({
      ...prevState, // spread out any previous state not related to "rooms"
      rooms: prevState.rooms.map(room => { // map over "rooms" and pull out each "room" object
        return room.name === data[0].name // if the "room.name" matches incoming data's "name", then...
          ? { ...data[0] } // spread and overwrite it with incoming data
          : room; // else leave the "room" as is
      })
 }));

使用array prototypes和pop之类的shift突变存储在state中的原始数组，而React无法处理对其state的突变。但是，您可以使用Array.from() clone room数组，也可以简单地创建一个新的数组实例，并使用某些数组prototype对该新实例进行突变，但是您必须，然后将此新实例数组重新设置为state以覆盖旧数组-React可以毫无问题地进行处理。它不如传播语法那么干净。

工作示例同时包含带有spread syntax 的Array.prototype和setInterval选项：

通过id和setInterval 随机更新数组中一项的工作示例：

动态组件如何覆盖彼此的状态？

1 个答案: