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

问题描述

我创建了基于 Redux 调度的房间对象创建的动态房间组件。

{
    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/>组件。有谁知道如何克服这个问题？

标签： javascriptreactjsreact-state-management

为了更新中的项目array，我建议使用扩展语法。扩展语法通过浅拷贝数组来工作，它保留对原始数组的引用，但允许您覆盖存储在其中的任何数据类型。这使数组保持不变。

我不确定您从哪里获取数据，但是由于您的数量有限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并在需要时将其存储到数组上，并使用传入数据更新其属性。但是，这假设传入数据包含所有rooms. 如果您只需要更新数组中的特定内容，那么您可以将一个room（或唯一标识它的东西）与传入的新数据进行比较。roomsidid

例如，一个新的更新进来了，但它只是更新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 prototypeslikepop和shiftmutate 存储在其中的原始数组state，React 不会处理对其state. 但是，您可以使用Array.from()clone或简单地创建一个新数组实例并使用一些数组函数改变这个新实例，但是您必须重新设置这个新实例数组以覆盖旧数组——React处理这个没有问题。它不像传播语法那样干净。roomprototypestate

工作示例包括spread syntax和Array.prototype选项setInterval：

id使用 a随机更新数组中的一项的工作示例setInterval：

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

问题描述

解决方案

推荐阅读