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

Question

我创建了基于 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。如果您只需要更新rooms 数组中的特定room，则可以将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 的突变。但是，您可以将 clone room 数组与 Array.from() 或简单地创建一个新数组实例并使用一些数组 prototype 函数改变这个新实例，但是您必须然后重新将此新实例数组设置为 state 以覆盖旧数组——React 可以毫无问题地处理这个问题。它只是没有传播语法那么干净。

---

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

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